初心儀式 Kidora
桃園市
:root {
--ink: #302824;
--ink-soft: #655a54;
--cream: #f8f2e9;
--paper: #fffdf9;
--rose: #b56766;
--rose-dark: #8e4f53;
--rose-pale: #f2ddda;
--plum: #694953;
--gold: #c79552;
--line: #ded3c7;
--shadow: 0 24px 70px rgba(73, 46, 38, 0.1);
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
background: var(--cream);
}
body {
margin: 0;
color: var(--ink);
background:
radial-gradient(circle at 92% 2%, rgba(210, 162, 145, 0.24), transparent 25rem),
var(--cream);
font-family: -apple-system, BlinkMacSystemFont, "Noto Sans TC", "PingFang TC",
"Microsoft JhengHei", "Segoe UI", sans-serif;
line-height: 1.75;
-webkit-font-smoothing: antialiased;
}
a {
color: inherit;
}
button,
input,
textarea,
select {
font: inherit;
}
button,
a {
-webkit-tap-highlight-color: transparent;
}
svg {
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.site-header {
width: min(1180px, calc(100% - 40px));
min-height: 82px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.brand {
display: inline-flex;
align-items: center;
gap: 12px;
color: var(--ink);
text-decoration: none;
}
.brand-mark {
width: 42px;
height: 42px;
border: 1px solid rgba(142, 79, 83, 0.4);
border-radius: 50% 50% 46% 54%;
display: grid;
place-items: center;
color: var(--rose-dark);
font-family: Georgia, serif;
font-size: 24px;
font-style: italic;
background: rgba(255, 253, 249, 0.7);
}
.brand b,
.brand small {
display: block;
}
.brand b {
font-size: 15px;
letter-spacing: 0.06em;
}
.brand small {
margin-top: 1px;
color: var(--ink-soft);
font-size: 11px;
letter-spacing: 0.08em;
}
.header-link {
color: var(--rose-dark);
font-size: 14px;
font-weight: 700;
text-decoration: none;
border-bottom: 1px solid currentColor;
}
.hero {
width: min(1180px, calc(100% - 40px));
min-height: 680px;
margin: 0 auto;
padding: 70px 0 90px;
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
align-items: center;
gap: 70px;
}
.eyebrow,
.section-kicker {
margin: 0 0 16px;
color: var(--rose-dark);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.hero h1,
.worksheet-hero h1 {
margin: 0;
font-family: Georgia, "Noto Serif TC", "Songti TC", serif;
font-weight: 500;
letter-spacing: -0.035em;
line-height: 1.18;
}
.hero h1 {
max-width: 760px;
font-size: clamp(44px, 5vw, 62px);
}
.hero-lead {
max-width: 680px;
margin: 28px 0 0;
color: var(--ink-soft);
font-size: 18px;
line-height: 1.9;
}
.hero-actions {
margin-top: 34px;
display: flex;
align-items: center;
gap: 20px;
}
.hero-actions > span {
color: var(--ink-soft);
font-size: 13px;
}
.button {
min-height: 52px;
padding: 12px 22px;
border: 1px solid transparent;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
text-decoration: none;
font-weight: 800;
cursor: pointer;
transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.button:hover {
transform: translateY(-2px);
}
.button:focus-visible,
.text-button:focus-visible,
.header-link:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
outline: 3px solid rgba(181, 103, 102, 0.28);
outline-offset: 3px;
}
.button svg,
.mobile-sticky svg {
width: 20px;
height: 20px;
}
.button.primary {
color: #fff;
background: var(--rose-dark);
box-shadow: 0 14px 30px rgba(104, 58, 63, 0.2);
}
.button.paper {
color: var(--rose-dark);
background: var(--paper);
}
.button.outline {
color: var(--rose-dark);
border-color: rgba(142, 79, 83, 0.35);
background: transparent;
}
.button.compact {
min-height: 42px;
padding: 8px 16px;
font-size: 13px;
}
.hero-visual {
position: relative;
min-height: 420px;
border-radius: 50% 44% 50% 46%;
background:
radial-gradient(circle at 38% 36%, rgba(255, 255, 255, 0.9), transparent 28%),
linear-gradient(140deg, #efdcd2 0%, #d6a59a 48%, #9f6871 100%);
box-shadow: var(--shadow);
}
.hero-visual::before {
content: "";
position: absolute;
inset: 10%;
border: 1px solid rgba(255, 255, 255, 0.44);
border-radius: 50%;
}
.question-card {
position: absolute;
width: 230px;
padding: 20px;
border: 1px solid rgba(255, 255, 255, 0.7);
border-radius: 20px;
color: var(--ink);
background: rgba(255, 253, 249, 0.9);
box-shadow: 0 18px 35px rgba(67, 43, 38, 0.14);
backdrop-filter: blur(8px);
font-family: Georgia, "Noto Serif TC", serif;
font-size: 20px;
}
.question-card span {
display: block;
margin-bottom: 6px;
color: var(--rose-dark);
font-family: -apple-system, BlinkMacSystemFont, "Noto Sans TC", sans-serif;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.16em;
}
.card-one {
top: 96px;
left: -30px;
transform: rotate(-3deg);
}
.card-two {
right: -14px;
bottom: 90px;
transform: rotate(3deg);
}
.answer-orbit {
position: absolute;
inset: 0;
}
.answer-orbit i {
position: absolute;
width: 44px;
height: 44px;
display: grid;
place-items: center;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.54);
border-radius: 50%;
font-family: Georgia, serif;
font-size: 18px;
font-style: normal;
background: rgba(83, 52, 59, 0.5);
}
.answer-orbit i:nth-child(1) { top: 35px; left: 44%; }
.answer-orbit i:nth-child(2) { top: 46%; right: 30px; }
.answer-orbit i:nth-child(3) { bottom: 22px; left: 42%; }
.answer-orbit i:nth-child(4) { top: 50%; left: 26px; }
.step-line {
width: min(920px, calc(100% - 40px));
margin: -24px auto 84px;
padding: 15px 20px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
border: 1px solid var(--line);
border-radius: 999px;
color: var(--ink-soft);
background: rgba(255, 253, 249, 0.72);
font-size: 12px;
text-align: center;
}
.step-line span {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.step-line b {
width: 24px;
height: 24px;
display: grid;
place-items: center;
border: 1px solid var(--line);
border-radius: 50%;
}
.step-line .is-current {
color: var(--rose-dark);
font-weight: 800;
}
.step-line .is-current b {
color: #fff;
border-color: var(--rose-dark);
background: var(--rose-dark);
}
.section-shell {
width: min(980px, calc(100% - 40px));
margin: 0 auto;
}
.intro {
text-align: center;
}
.intro h2,
.section-title-row h2,
.main-cta h2,
.faq > h2 {
margin: 0;
font-family: Georgia, "Noto Serif TC", serif;
font-size: clamp(30px, 4vw, 46px);
font-weight: 500;
line-height: 1.3;
}
.intro > p:last-of-type {
max-width: 720px;
margin: 18px auto 0;
color: var(--ink-soft);
}
.quick-select {
margin: 38px auto 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.quick-select a {
min-height: 96px;
padding: 14px;
border: 1px solid var(--line);
border-radius: 18px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
color: var(--ink-soft);
background: rgba(255, 253, 249, 0.72);
text-decoration: none;
transition: 160ms ease;
}
.quick-select a:hover,
.quick-select a.selected {
color: var(--rose-dark);
border-color: rgba(142, 79, 83, 0.46);
background: var(--paper);
transform: translateY(-3px);
}
.quick-select b {
font-family: Georgia, serif;
font-size: 24px;
}
.quick-select span {
font-size: 13px;
}
.results-grid {
margin-top: 72px;
display: grid;
gap: 28px;
}
.result-card {
scroll-margin-top: 28px;
padding: clamp(26px, 5vw, 58px);
border: 1px solid var(--line);
border-radius: 34px;
background: rgba(255, 253, 249, 0.9);
box-shadow: 0 14px 50px rgba(73, 46, 38, 0.06);
transition: box-shadow 240ms ease, border-color 240ms ease;
}
.result-card.active {
border-color: rgba(142, 79, 83, 0.58);
box-shadow: 0 24px 70px rgba(103, 59, 62, 0.15);
}
.result-heading {
display: flex;
align-items: center;
gap: 20px;
}
.result-letter {
flex: 0 0 auto;
width: 62px;
height: 62px;
display: grid;
place-items: center;
color: #fff;
border-radius: 22px 18px 22px 18px;
background: var(--rose-dark);
font-family: Georgia, serif;
font-size: 28px;
}
.result-heading p {
margin: 0 0 4px;
color: var(--rose-dark);
font-size: 13px;
font-weight: 800;
}
.result-heading h2 {
margin: 0;
font-family: Georgia, "Noto Serif TC", serif;
font-size: clamp(25px, 4vw, 36px);
font-weight: 500;
line-height: 1.32;
}
.result-summary {
margin: 26px 0;
color: var(--ink-soft);
font-size: 17px;
}
.insight-pair {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
.insight-pair > div {
padding: 20px;
border-radius: 18px;
background: var(--cream);
}
.insight-pair span {
color: var(--rose-dark);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
}
.insight-pair p {
margin: 8px 0 0;
font-size: 14px;
}
.action-box {
margin-top: 24px;
padding: 22px 24px;
border-left: 3px solid var(--gold);
background: #fcf7ed;
}
.action-box h3 {
margin: 0;
font-size: 16px;
}
.action-box ol {
margin: 12px 0 0;
padding-left: 22px;
}
.action-box li + li {
margin-top: 7px;
}
.result-card blockquote {
margin: 24px 0 0;
padding: 20px 24px;
color: #fff;
border-radius: 18px;
background: var(--plum);
font-family: Georgia, "Noto Serif TC", serif;
font-size: 18px;
}
.result-card blockquote span {
display: block;
margin-bottom: 5px;
color: #e8cbd0;
font-family: -apple-system, BlinkMacSystemFont, "Noto Sans TC", sans-serif;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.1em;
}
.decision-levels {
margin-top: 100px;
}
.section-title-row {
display: flex;
align-items: end;
justify-content: space-between;
gap: 40px;
}
.section-title-row > p {
max-width: 300px;
margin: 0;
color: var(--ink-soft);
}
.level-grid {
margin-top: 32px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.level-grid article {
padding: 26px;
border: 1px solid var(--line);
border-radius: 24px;
background: rgba(255, 253, 249, 0.76);
}
.level-grid h3 {
margin: 18px 0 8px;
font-size: 18px;
}
.level-grid p {
margin: 0;
color: var(--ink-soft);
font-size: 14px;
}
.level-dot {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 12px;
font-weight: 800;
}
.level-dot::before {
content: "";
width: 9px;
height: 9px;
border-radius: 50%;
background: currentColor;
}
.level-dot.green { color: #627665; }
.level-dot.amber { color: #a87536; }
.level-dot.red { color: #a05255; }
.main-cta {
margin-top: 100px;
padding: clamp(28px, 6vw, 62px);
border-radius: 36px;
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 44px;
color: #fff;
background:
radial-gradient(circle at 96% 0%, rgba(255, 255, 255, 0.12), transparent 18rem),
var(--plum);
}
.section-kicker.light {
color: #edcdd1;
}
.main-cta > div > p:not(.section-kicker) {
color: #eadfe1;
}
.check-list {
margin: 22px 0 0;
padding: 0;
list-style: none;
}
.check-list li {
position: relative;
padding-left: 24px;
}
.check-list li::before {
content: "✓";
position: absolute;
left: 0;
color: #f3cdbf;
}
.cta-panel {
padding: 28px;
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 25px;
align-self: center;
background: rgba(255, 255, 255, 0.08);
}
.cta-panel > span {
display: inline-block;
padding: 5px 10px;
border-radius: 999px;
color: var(--plum);
background: #f0d6cf;
font-size: 11px;
font-weight: 800;
}
.cta-panel h3 {
margin: 16px 0 8px;
font-family: Georgia, "Noto Serif TC", serif;
font-size: 25px;
font-weight: 500;
line-height: 1.4;
}
.cta-panel p {
color: #eadfe1;
font-size: 14px;
}
.cta-panel .button {
margin-top: 12px;
width: 100%;
}
.note {
margin-top: 30px;
padding: 24px 28px;
border: 1px solid var(--line);
border-radius: 18px;
display: grid;
grid-template-columns: 0.8fr 1.2fr;
gap: 24px;
background: rgba(255, 253, 249, 0.56);
font-size: 13px;
}
.note p {
margin: 0;
color: var(--ink-soft);
}
.site-footer {
width: min(1180px, calc(100% - 40px));
margin: 90px auto 0;
padding: 34px 0 44px;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
color: var(--ink-soft);
font-size: 13px;
}
.site-footer b {
color: var(--ink);
}
.site-footer p {
margin: 3px 0 0;
}
.site-footer a {
color: var(--rose-dark);
font-weight: 800;
text-decoration: none;
}
.mobile-sticky {
display: none;
}
/* Worksheet */
.worksheet-page {
background:
linear-gradient(rgba(255, 253, 249, 0.48), rgba(255, 253, 249, 0.48)),
radial-gradient(circle at 8% 0%, rgba(204, 145, 137, 0.22), transparent 30rem);
}
.worksheet-hero {
width: min(1080px, calc(100% - 40px));
margin: 0 auto;
padding: 86px 0 64px;
display: grid;
grid-template-columns: 1.2fr 0.8fr;
align-items: center;
gap: 62px;
}
.worksheet-hero h1 {
font-size: clamp(42px, 6vw, 72px);
}
.worksheet-hero > div > p:not(.eyebrow) {
max-width: 720px;
margin: 24px 0 0;
color: var(--ink-soft);
font-size: 17px;
}
.privacy-card {
padding: 28px;
border: 1px solid rgba(142, 79, 83, 0.25);
border-radius: 28px 22px 28px 22px;
background: rgba(255, 253, 249, 0.86);
box-shadow: var(--shadow);
}
.privacy-card b {
color: var(--rose-dark);
}
.privacy-card ul {
margin: 12px 0 0;
padding-left: 20px;
color: var(--ink-soft);
font-size: 14px;
}
.worksheet-toolbar {
position: sticky;
top: 12px;
z-index: 10;
width: min(900px, calc(100% - 40px));
min-height: 66px;
margin: 0 auto 20px;
padding: 10px 12px 10px 20px;
border: 1px solid rgba(219, 207, 195, 0.9);
border-radius: 999px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
background: rgba(255, 253, 249, 0.92);
box-shadow: 0 12px 35px rgba(65, 45, 39, 0.11);
backdrop-filter: blur(16px);
}
.worksheet-toolbar > span {
display: flex;
align-items: center;
gap: 9px;
color: var(--ink-soft);
font-size: 12px;
}
.worksheet-toolbar > span i {
width: 8px;
height: 8px;
border-radius: 50%;
background: #778b72;
}
.worksheet-toolbar > div {
display: flex;
align-items: center;
gap: 12px;
}
.text-button {
padding: 8px 4px;
color: var(--rose-dark);
border: 0;
border-bottom: 1px solid currentColor;
background: transparent;
font-size: 13px;
font-weight: 800;
cursor: pointer;
}
.text-button.danger {
color: #945d5d;
}
.worksheet-form {
width: min(900px, calc(100% - 40px));
margin: 0 auto;
}
.form-section {
margin-top: 22px;
padding: clamp(24px, 5vw, 46px);
border: 1px solid var(--line);
border-radius: 30px;
background: rgba(255, 253, 249, 0.92);
box-shadow: 0 14px 45px rgba(73, 46, 38, 0.055);
}
.form-section-title {
display: flex;
align-items: flex-start;
gap: 18px;
}
.form-section-title > span {
flex: 0 0 auto;
width: 44px;
height: 44px;
display: grid;
place-items: center;
color: #fff;
border-radius: 15px 12px 15px 12px;
background: var(--rose-dark);
font-family: Georgia, serif;
font-size: 14px;
}
.form-section-title p {
margin: 0;
color: var(--rose-dark);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
}
.form-section-title h2 {
margin: 3px 0 0;
font-family: Georgia, "Noto Serif TC", serif;
font-size: clamp(24px, 4vw, 34px);
font-weight: 500;
line-height: 1.35;
}
.form-help {
margin: 18px 0 0;
color: var(--ink-soft);
font-size: 13px;
}
.choice-grid {
margin-top: 22px;
display: grid;
gap: 10px;
}
.age-grid {
grid-template-columns: repeat(3, 1fr);
}
.situation-grid {
grid-template-columns: repeat(2, 1fr);
}
.choice-card {
position: relative;
min-height: 54px;
cursor: pointer;
}
.choice-card input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
.choice-card span {
min-height: 54px;
padding: 12px 14px;
border: 1px solid var(--line);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
color: var(--ink-soft);
background: #fff;
font-size: 13px;
text-align: center;
transition: 150ms ease;
}
.choice-card.checkbox span {
justify-content: flex-start;
padding-left: 44px;
text-align: left;
}
.choice-card.checkbox span::before {
content: "";
position: absolute;
left: 15px;
width: 18px;
height: 18px;
border: 1px solid var(--line);
border-radius: 6px;
background: var(--paper);
}
.choice-card input:checked + span {
color: var(--rose-dark);
border-color: rgba(142, 79, 83, 0.56);
background: var(--rose-pale);
font-weight: 800;
}
.choice-card.checkbox input:checked + span::before {
content: "✓";
display: grid;
place-items: center;
color: #fff;
border-color: var(--rose-dark);
background: var(--rose-dark);
font-size: 11px;
}
.field-row {
display: grid;
gap: 14px;
}
.two-columns {
grid-template-columns: repeat(2, 1fr);
}
.form-section .field-row,
.form-section .full-field,
.agreement-card .field-row {
margin-top: 22px;
}
.form-section label,
.agreement-card label {
color: var(--ink);
font-size: 13px;
font-weight: 800;
}
input,
textarea,
select {
width: 100%;
margin-top: 7px;
padding: 13px 14px;
color: var(--ink);
border: 1px solid var(--line);
border-radius: 12px;
background: #fff;
font-size: 14px;
font-weight: 500;
outline: none;
}
textarea {
min-height: 80px;
resize: vertical;
line-height: 1.7;
}
input::placeholder,
textarea::placeholder {
color: #9d938c;
}
input:focus,
textarea:focus,
select:focus {
border-color: var(--rose);
box-shadow: 0 0 0 3px rgba(181, 103, 102, 0.12);
}
.full-field {
display: block;
}
.rule-table {
margin-top: 24px;
border: 1px solid var(--line);
border-radius: 20px;
overflow: hidden;
}
.rule-row {
padding: 24px;
display: grid;
grid-template-columns: 120px 1fr;
gap: 18px;
align-items: start;
background: #fff;
}
.rule-row + .rule-row {
border-top: 1px solid var(--line);
}
.rule-row b {
font-size: 15px;
}
.rule-row p {
margin: 3px 0 10px;
color: var(--ink-soft);
font-size: 12px;
}
.quote-field {
padding: 20px;
border-radius: 16px;
background: #f7edea;
}
.task-table {
margin-top: 24px;
border: 1px solid var(--line);
border-radius: 18px;
overflow: hidden;
}
.task-head,
.task-row {
display: grid;
grid-template-columns: 1.1fr 0.75fr 1fr;
gap: 10px;
align-items: center;
}
.task-head {
padding: 13px 16px;
color: #fff;
background: var(--plum);
font-size: 12px;
}
.task-row {
padding: 12px 16px;
background: #fff;
}
.task-row + .task-row {
border-top: 1px solid var(--line);
}
.task-row span {
font-size: 13px;
font-weight: 700;
}
.task-row input {
margin-top: 0;
padding: 10px;
}
.agreement-checks {
margin-top: 24px;
display: grid;
gap: 10px;
}
.agreement-checks label {
position: relative;
cursor: pointer;
}
.agreement-checks input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
.agreement-checks span {
min-height: 54px;
padding: 13px 16px 13px 48px;
border: 1px solid var(--line);
border-radius: 14px;
display: flex;
align-items: center;
background: #fff;
font-weight: 600;
}
.agreement-checks span::before {
content: "";
position: absolute;
left: 17px;
width: 19px;
height: 19px;
border: 1px solid var(--line);
border-radius: 6px;
}
.agreement-checks input:checked + span {
color: var(--rose-dark);
border-color: rgba(142, 79, 83, 0.48);
background: var(--rose-pale);
}
.agreement-checks input:checked + span::before {
content: "✓";
display: grid;
place-items: center;
color: #fff;
border-color: var(--rose-dark);
background: var(--rose-dark);
font-size: 11px;
}
.agreement-card {
margin: 24px 0 0;
padding: 18px 22px 22px;
border: 1px solid var(--line);
border-radius: 20px;
background: #fff;
}
.agreement-card legend {
padding: 0 10px;
color: var(--rose-dark);
font-family: Georgia, "Noto Serif TC", serif;
font-size: 19px;
font-weight: 700;
}
.agreement-card > label {
display: block;
margin-top: 12px;
}
.compact-row {
margin-top: 14px !important;
}
.form-finish {
margin-top: 22px;
padding: clamp(26px, 5vw, 48px);
border-radius: 30px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
color: #fff;
background: var(--plum);
}
.form-finish h2 {
margin: 0;
font-family: Georgia, "Noto Serif TC", serif;
font-size: 30px;
font-weight: 500;
}
.form-finish p:not(.section-kicker) {
max-width: 570px;
margin: 10px 0 0;
color: #e7dadd;
font-size: 14px;
}
.finish-actions {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.finish-actions .button.primary {
color: var(--rose-dark);
background: var(--paper);
}
.finish-actions .text-button {
color: #e7c9cd;
}
.service-bridge {
width: min(980px, calc(100% - 40px));
margin: 100px auto 0;
border: 1px solid var(--line);
border-radius: 34px;
display: grid;
grid-template-columns: 0.5fr 1.5fr;
overflow: hidden;
background: var(--paper);
box-shadow: var(--shadow);
}
.service-bridge-tag {
min-height: 330px;
padding: 30px;
display: flex;
align-items: flex-end;
color: #fff;
background:
linear-gradient(180deg, rgba(88, 53, 59, 0.08), rgba(88, 53, 59, 0.76)),
radial-gradient(circle at 30% 20%, #eccfbe, #b77576 55%, #694953);
font-family: Georgia, "Noto Serif TC", serif;
font-size: 25px;
line-height: 1.45;
}
.service-bridge-copy {
padding: clamp(28px, 5vw, 50px);
align-self: center;
}
.service-bridge-copy h2 {
margin: 0;
font-family: Georgia, "Noto Serif TC", serif;
font-size: clamp(28px, 4vw, 42px);
font-weight: 500;
line-height: 1.35;
}
.service-bridge-copy > p:not(.section-kicker) {
color: var(--ink-soft);
}
.service-actions {
margin-top: 24px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
}
.text-link {
color: var(--rose-dark);
font-size: 13px;
font-weight: 800;
}
.faq {
margin-top: 100px;
}
.faq details {
padding: 20px 0;
border-bottom: 1px solid var(--line);
}
.faq summary {
cursor: pointer;
font-weight: 800;
}
.faq details p {
max-width: 760px;
margin: 10px 0 0;
color: var(--ink-soft);
}
@media (max-width: 900px) {
.hero {
min-height: auto;
grid-template-columns: 1fr;
gap: 56px;
}
.hero-visual {
width: min(520px, 92%);
justify-self: center;
}
.main-cta,
.worksheet-hero {
grid-template-columns: 1fr;
}
.level-grid {
grid-template-columns: 1fr;
}
.service-bridge {
grid-template-columns: 0.7fr 1.3fr;
}
}
@media (max-width: 680px) {
body {
line-height: 1.7;
}
.site-header {
width: min(100% - 28px, 1180px);
min-height: 72px;
}
.brand-mark {
width: 38px;
height: 38px;
}
.brand small {
display: none;
}
.header-link {
font-size: 12px;
}
.hero {
width: min(100% - 32px, 1180px);
padding: 46px 0 65px;
gap: 48px;
}
.hero h1 {
font-size: 43px;
}
.hero-lead {
font-size: 16px;
}
.hero-actions {
align-items: flex-start;
flex-direction: column;
}
.hero-visual {
min-height: 330px;
}
.question-card {
width: 200px;
padding: 16px;
font-size: 17px;
}
.card-one {
left: -4px;
top: 68px;
}
.card-two {
right: -4px;
bottom: 58px;
}
.step-line {
margin-bottom: 66px;
padding: 13px;
border-radius: 20px;
grid-template-columns: 1fr;
text-align: left;
}
.step-line span {
justify-content: flex-start;
}
.section-shell,
.worksheet-form,
.worksheet-toolbar,
.worksheet-hero,
.service-bridge {
width: min(100% - 28px, 980px);
}
.quick-select {
grid-template-columns: repeat(2, 1fr);
}
.result-card {
border-radius: 25px;
}
.result-heading {
align-items: flex-start;
}
.result-letter {
width: 50px;
height: 50px;
border-radius: 17px 14px 17px 14px;
font-size: 23px;
}
.insight-pair {
grid-template-columns: 1fr;
}
.section-title-row,
.site-footer,
.note,
.form-finish {
align-items: flex-start;
flex-direction: column;
}
.section-title-row {
display: flex;
}
.main-cta {
padding: 28px 22px;
border-radius: 28px;
}
.note {
display: flex;
}
.site-footer {
margin-top: 72px;
padding-bottom: 92px;
}
.mobile-sticky {
position: fixed;
z-index: 20;
right: 12px;
bottom: 12px;
left: 12px;
display: block;
}
.mobile-sticky a {
min-height: 54px;
padding: 12px 20px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
color: #fff;
background: var(--rose-dark);
box-shadow: 0 15px 40px rgba(65, 37, 40, 0.32);
text-decoration: none;
font-weight: 800;
}
.worksheet-hero {
padding: 48px 0 44px;
gap: 28px;
}
.worksheet-hero h1 {
font-size: 40px;
}
.worksheet-toolbar {
top: 8px;
padding: 10px 12px;
border-radius: 20px;
flex-direction: column;
align-items: stretch;
}
.worksheet-toolbar > div {
justify-content: space-between;
}
.worksheet-toolbar .button {
min-height: 40px;
}
.form-section {
padding: 24px 18px;
border-radius: 24px;
}
.age-grid,
.situation-grid,
.two-columns {
grid-template-columns: 1fr;
}
.rule-row {
grid-template-columns: 1fr;
}
.task-head {
display: none;
}
.task-row {
grid-template-columns: 1fr;
gap: 4px;
padding: 18px;
}
.task-row span {
margin-bottom: 4px;
color: var(--rose-dark);
}
.task-row input::placeholder {
color: #8d827b;
}
.task-row input:first-of-type::placeholder {
font-size: 0;
}
.finish-actions,
.finish-actions .button {
width: 100%;
}
.service-bridge {
margin-top: 72px;
grid-template-columns: 1fr;
}
.service-bridge-tag {
min-height: 220px;
}
.service-actions,
.service-actions .button {
width: 100%;
}
.faq {
margin-top: 72px;
}
}
@media print {
@page {
margin: 13mm;
}
body,
.worksheet-page {
color: #1f1f1f;
background: #fff !important;
}
.worksheet-header,
.worksheet-toolbar,
.service-bridge,
.faq,
.site-footer,
.finish-actions,
.privacy-card {
display: none !important;
}
.worksheet-hero {
width: 100%;
padding: 0 0 16px;
display: block;
}
.worksheet-hero h1 {
font-size: 30px;
}
.worksheet-hero > div > p:not(.eyebrow) {
font-size: 12px;
}
.worksheet-form {
width: 100%;
}
.form-section,
.form-finish {
break-inside: avoid;
margin-top: 12px;
padding: 16px;
border: 1px solid #bbb;
border-radius: 10px;
box-shadow: none;
background: #fff !important;
}
.form-section-title > span {
color: #1f1f1f;
border: 1px solid #777;
background: #fff;
}
.form-section-title h2 {
font-size: 20px;
}
input,
textarea {
color: #1f1f1f;
border-color: #aaa;
background: #fff !important;
}
.choice-card input:checked + span,
.agreement-checks input:checked + span,
.quote-field,
.task-row,
.rule-row,
.agreement-card {
color: #1f1f1f;
background: #fff !important;
}
.form-finish {
color: #1f1f1f;
display: block;
}
.form-finish p:not(.section-kicker) {
color: #444;
}
}
J潔咪的家庭觀察有孩子後的家庭討論表 回看結果解析
給已經有孩子的家庭
家庭分工與教養共識討論表
直接從現在家裡最常發生的情況開始，把誰回答、誰處理、意見不同時怎麼辦，寫成下次能使用的規則
填寫前先知道
內容只存在目前這台裝置，不會自動送出
可以先由一個人填，再約時間一起看
完成後按「列印／存成 PDF」保留一份
尚未填寫
分享空白表列印／存成 PDF
01
先對準現在的生活
孩子目前在哪個階段？
不同年齡會遇到不同問題，這題只用來幫你們把討論拉回現在
0–1 歲 1–3 歲 4–6 歲 國小 國中以上 家中有不同年齡孩子
填寫人 1（可留空）填寫人 2（可留空）
02
先挑一件就好
最近最常重複的卡點是什麼？
最多先選三項。如果每一項都想處理，最後通常一項都談不完。
買玩具或臨時消費 零食、飲料與用餐 手機、平板與電視時間 睡覺、洗澡與出門時間 上學、作業與才藝安排 哭鬧、處罰與道歉方式 長輩介入教養 家事與照顧分工
這件事最近一次怎麼發生？
03
讓孩子不用一直換人問
把事情分成三類
日常小事
當下照顧孩子的人可以決定
先寫出 2–3 件不用再次確認的事。
需要討論
先告訴孩子何時會有答案
寫下需要兩人談過，但不必立刻回答的事。
共同決定
兩人都確認後才執行
寫下安全、健康或長期安排相關的事。
孩子來問時，我們先統一這樣回答
04
「有幫忙」要寫得夠具體
日常分工：主要負責與備援是誰？
主要負責包含記得、安排與追蹤；備援的人要知道在什麼情況下接手。
家庭任務主要負責備援／何時接手
看診、用藥與健康紀錄
學校／托育訊息與回覆
日用品、衣物與備品補充
接送、行程與臨時請假
與長輩溝通家庭規則
目前最需要重新分配的一件事
05
先保護關係，再處理意見
答案不同時，我們怎麼做？
不在孩子面前直接推翻另一個人的回答。 還沒談過的事，先告訴孩子晚一點再回答。 有安全疑慮時，先停止，再由兩人確認。 不讓孩子負責在兩位家長之間傳話。 討論只處理這件事，不把以前所有不滿一起翻出來。
我們最晚在什麼時候談？談不完時，這次由誰先做暫時決定？
06
不要等到有人爆炸才知道太累
需要換手時，用哪一句話？
我說這句話，代表真的需要暫停聽到後，另一個人先做的具體行動
哪些情況要直接找外部協助？
07
本週先做到這裡
寫下三項可檢查的約定
請寫「誰、在什麼情況、做什麼」，一週後才知道有沒有做到。
約定 1遇到什麼情況？我們的新規則
主要執行人回看日期
約定 2遇到什麼情況？我們的新規則
主要執行人回看日期
約定 3遇到什麼情況？我們的新規則
主要執行人回看日期
完成前最後確認
你們不需要一次變得很有默契
先讓下一次遇到同一件事時，兩個人知道要怎麼回答，做了一週不合用，再一起改
列印／存成 PDF清除全部內容
家裡有即將滿一歲的寶寶嗎？
需要時再往下看
如果你正在安排抓周，這裡是正確的服務入口
先看完整服務內容，確認地區、流程與適合對象；已經有預計日期，也可以直接填檔期表單。這個入口只放在符合需求的位置，不會混進家庭討論表裡
看桃園到府抓周服務 →填寫檔期查詢表單加入官方 LINE
常見問題
填寫時可能會遇到的問題
只能一個人先填嗎？
可以。先填的人把自己的想法寫具體，再請另一個人只標出不同意或需要補充的地方，比從空白開始談更容易。
兩個人每一題都不同，怎麼辦？
先不要追求全部一致。只挑最近一週最常發生的那件事，訂一個試行七天的做法，到回看日期再調整。
填寫內容會被收集嗎？
不會。內容只存在你現在使用的瀏覽器。若清除網站資料或換裝置，內容不會自動帶過去，請記得列印或存成 PDF。
家庭分工與教養共識討論表
這是家庭討論工具，不是心理、醫療或親職診斷。
回到 A／B／C／D 結果解析
(function () {
"use strict";
var result = new URLSearchParams(window.location.search).get("result");
if (result) {
result = result.toUpperCase();
var card = document.querySelector('[data-result-card="' + result + '"]');
var link = document.querySelector('[data-result-link="' + result + '"]');
if (card && link && ["A", "B", "C", "D"].indexOf(result) !== -1) {
card.classList.add("active");
link.classList.add("selected");
window.setTimeout(function () {
card.scrollIntoView({ behavior: "smooth", block: "center" });
}, 350);
}
}
document.querySelectorAll("[data-result-link]").forEach(function (link) {
link.addEventListener("click", function () {
document.querySelectorAll("[data-result-card]").forEach(function (card) {
card.classList.remove("active");
});
document.querySelectorAll("[data-result-link]").forEach(function (item) {
item.classList.remove("selected");
});
var key = link.getAttribute("data-result-link");
var selectedCard = document.querySelector('[data-result-card="' + key + '"]');
link.classList.add("selected");
if (selectedCard) selectedCard.classList.add("active");
});
});
var form = document.getElementById("family-form");
if (!form) return;
var storageKey = "jamie-family-agreement-v1";
var status = document.getElementById("save-status");
function formToObject() {
var data = {};
new FormData(form).forEach(function (value, key) {
if (Object.prototype.hasOwnProperty.call(data, key)) {
data[key] = Array.isArray(data[key]) ? data[key].concat(String(value)) : [data[key], String(value)];
} else {
data[key] = String(value);
}
});
return data;
}
function saveForm() {
try {
localStorage.setItem(storageKey, JSON.stringify(formToObject()));
if (status) {
status.textContent = "已自動儲存 " + new Date().toLocaleTimeString("zh-TW", { hour: "2-digit", minute: "2-digit" });
}
} catch {
if (status) status.textContent = "瀏覽器未允許儲存，請完成後存成 PDF";
}
}
function restoreForm() {
var raw;
try {
raw = localStorage.getItem(storageKey);
} catch {
return;
}
if (!raw) return;
try {
var data = JSON.parse(raw);
Array.prototype.forEach.call(form.elements, function (field) {
if (!field.name || !Object.prototype.hasOwnProperty.call(data, field.name)) return;
var value = data[field.name];
if (field.type === "checkbox" || field.type === "radio") {
field.checked = Array.isArray(value) ? value.indexOf(field.value) !== -1 : value === field.value;
} else if (typeof value === "string") {
field.value = value;
}
});
if (status) status.textContent = "已載入上次填寫內容";
} catch {
localStorage.removeItem(storageKey);
}
}
function copyText(text) {
if (navigator.clipboard && window.isSecureContext) {
return navigator.clipboard.writeText(text);
}
var helper = document.createElement("textarea");
helper.value = text;
helper.setAttribute("readonly", "");
helper.style.position = "fixed";
helper.style.opacity = "0";
document.body.appendChild(helper);
helper.select();
document.execCommand("copy");
helper.remove();
return Promise.resolve();
}
form.addEventListener("input", saveForm);
form.addEventListener("change", function (event) {
if (event.target && event.target.name === "situations" && event.target.checked) {
var selected = form.querySelectorAll('input[name="situations"]:checked');
if (selected.length > 3) {
event.target.checked = false;
window.alert("先選三項就好。可以從最近一週最常發生的事開始。");
}
}
saveForm();
});
form.addEventListener("submit", function (event) { event.preventDefault(); });
document.querySelectorAll('[data-action="print"]').forEach(function (button) {
button.addEventListener("click", function () { window.print(); });
});
document.querySelectorAll('[data-action="clear"]').forEach(function (button) {
button.addEventListener("click", function () {
if (!window.confirm("確定要清除這台裝置上的所有填寫內容嗎？")) return;
form.reset();
try { localStorage.removeItem(storageKey); } catch { /* no-op */ }
if (status) status.textContent = "已清除，可以重新填寫";
window.scrollTo({ top: 0, behavior: "smooth" });
});
});
document.querySelectorAll('[data-action="share"]').forEach(function (button) {
button.addEventListener("click", function () {
var blankUrl = window.location.href.split("?")[0].split("#")[0];
copyText(blankUrl).then(function () {
var original = button.textContent;
button.textContent = "已複製空白表連結";
window.setTimeout(function () { button.textContent = original; }, 1800);
});
});
});
restoreForm();
})();
https://www.kidora.com.tw/hot_538392.html
家庭分工與教養共識討論表(可輸出列印版自行下載)
2026-08-17
2027-08-17
初心儀式 Kidora
桃園市
https://www.kidora.com.tw/hot_538392.html
初心儀式 Kidora
桃園市
https://www.kidora.com.tw/hot_538392.html
https://schema.org/EventMovedOnline
https://schema.org/OfflineEventAttendanceMode
2026-08-17
http://schema.org/InStock
TWD
0
https://www.kidora.com.tw/hot_538392.html
