/* ============================================================ HYPNODONTIA — SHARED DESIGN SYSTEM ============================================================ TOKENS --ink deep navy headings / buttons / hero bg --ink-2 navy-2 gradients / hover --paper warm paper page background --paper-2 paper alt alternating sections --accent page accent numerals / links / icon accents (overridden per page — see bottom) --accent-2 pale accent tints on navy --line hairline borders on paper --line-ink hairline borders on navy --slate secondary text --good/--limit "can / cannot" contrast panel colors TYPE Display: Fraunces (serif, used with restraint — H1/H2/quotes) Body/UI: Inter This file is shared by every page. Page-specific accent colors are set via a class on (see bottom of this file) — pages should never redeclare component styles. ============================================================ */ :root{ --ink:#14213D; --ink-2:#1E3357; --paper:#FBF9F5; --paper-2:#F1EEE7; --accent:#3E6FA6; --accent-2:#A9C4DC; --line:#DCD6C8; --line-ink:rgba(255,255,255,.18); --slate:#5B6472; --good:#2F6B4F; --good-bg:#EEF3EE; --limit:#8A6A3C; --limit-bg:#F6F0E6; --container:1120px; --ease-out:cubic-bezier(0.23, 1, 0.32, 1); --ease-content:cubic-bezier(0.33, 1, 0.68, 1); } *{box-sizing:border-box; margin:0; padding:0;} html{scroll-behavior:smooth;} body{ font-family:'Inter',system-ui,sans-serif; color:var(--ink); background:var(--paper); line-height:1.6; -webkit-font-smoothing:antialiased; } h1,h2,h3,.serif{font-family:'Fraunces',Georgia,serif; font-weight:500; letter-spacing:-0.01em;} img,svg{display:block; max-width:100%;} a{color:inherit;} ul{list-style:none;} button{font-family:inherit;} :focus-visible{outline:2.5px solid var(--accent); outline-offset:3px;} .wrap{max-width:var(--container); margin:0 auto; padding:0 32px;} @media(max-width:640px){.wrap{padding:0 20px;}} .eyebrow{ font-size:12.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); } .eyebrow.on-ink{color:var(--accent-2);} section{padding:100px 0;} @media(max-width:640px){section{padding:60px 0;}} .alt{background:var(--paper-2);} /* ---------- BUTTONS ---------- */ .btn{ display:inline-flex; align-items:center; gap:10px; font-family:'Inter',sans-serif; font-weight:600; font-size:15px; letter-spacing:.01em; padding:16px 30px; border-radius:999px; text-decoration:none; cursor:pointer; border:1.5px solid transparent; transition:transform .15s var(--ease-out), box-shadow .15s var(--ease-out), background .15s var(--ease-out); line-height:1; } .btn:hover{transform:translateY(-1px);} .btn:active{transform:scale(0.97);} .btn-primary{background:var(--ink); color:#fff;} .btn-primary:hover{background:var(--ink-2); box-shadow:0 8px 24px rgba(20,33,61,.25);} .btn-primary.on-ink{background:#fff; color:var(--ink);} .btn-primary.on-ink:hover{background:var(--accent-2);} .btn-ghost{background:transparent; color:var(--ink); border-color:var(--line);} .btn-ghost:hover{border-color:var(--ink);} .btn-ghost.on-ink{color:#fff; border-color:var(--line-ink);} .btn-ghost.on-ink:hover{border-color:#fff;} .btn-sm{padding:11px 20px; font-size:13.5px;} .cta-row{display:flex; gap:14px; flex-wrap:wrap; align-items:center;} /* ---------- NAV ---------- */ .site-header{ position:sticky; top:0; z-index:60; background:rgba(251,249,245,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } .site-header .wrap{display:flex; align-items:center; justify-content:space-between; height:76px;} .logo{font-family:'Fraunces',serif; font-weight:600; font-size:19px; letter-spacing:-.01em; text-decoration:none; color:var(--ink); flex-shrink:0;} .navlinks{display:flex; gap:30px; font-size:14.5px; font-weight:500; color:var(--slate); align-items:center;} .navlinks > li{position:relative;} .navlinks a{text-decoration:none;} .navlinks a:hover{color:var(--ink);} .navlinks .current > a{color:var(--ink); font-weight:600;} .nav-cta{margin-left:8px;} .has-dropdown > button{ background:none; border:none; font:inherit; color:inherit; display:flex; align-items:center; gap:5px; cursor:pointer; padding:4px 0; } .has-dropdown > button:hover{color:var(--ink);} .has-dropdown .chev{width:8px; height:8px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(45deg); margin-top:-3px; transition:transform .2s ease;} .has-dropdown.open .chev{transform:rotate(-135deg); margin-top:2px;} .dropdown{ position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(-6px); background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 16px 40px rgba(20,33,61,.12); min-width:250px; padding:10px; opacity:0; visibility:hidden; transition:opacity .18s ease, transform .18s ease; } .has-dropdown.open .dropdown, .has-dropdown:hover .dropdown{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);} .dropdown a{display:block; padding:11px 14px; border-radius:9px; font-size:14px; color:var(--ink); text-decoration:none;} .dropdown a:hover{background:var(--paper-2);} .dropdown a.current{color:var(--accent); font-weight:600;} .nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:6px; flex-direction:column; gap:5px;} .nav-toggle span{width:22px; height:2px; background:var(--ink); border-radius:2px; transition:transform .2s ease, opacity .2s ease;} .mobile-panel{ display:none; position:fixed; inset:76px 0 0 0; background:var(--paper); z-index:55; overflow-y:auto; padding:12px 20px 40px; } .mobile-panel.open{display:block;} .mobile-panel a{ display:block; padding:16px 4px; font-size:17px; font-weight:500; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); } .mobile-panel .msub a{padding-left:20px; font-size:15.5px; color:var(--slate);} .mobile-panel .mgroup-label{padding:16px 4px 6px; font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--slate); font-weight:700;} .mobile-cta{margin-top:22px;} .mobile-panel a.mobile-cta{ display:flex; align-items:center; justify-content:center; padding:16px 30px; color:#fff; font-weight:600; line-height:1.3; border-bottom:none; } @media(max-width:900px){ .navlinks{display:none;} .nav-toggle{display:flex;} } /* ---------- SECTION HEADS ---------- */ .section-head{max-width:640px; margin-bottom:48px;} .section-head .eyebrow{margin-bottom:14px;} .section-head h2{font-size:34px; line-height:1.2;} @media(max-width:640px){.section-head h2{font-size:26px;}} .section-head p{color:var(--slate); font-size:16px; margin-top:14px;} .section-head.center{margin-left:auto; margin-right:auto; text-align:center;} .section-head.wide{max-width:760px;} /* ---------- HERO (shared shell — pages fill in visual slot) ---------- */ .hero{ position:relative; background:linear-gradient(160deg,var(--ink) 0%, var(--ink-2) 100%); color:#fff; overflow:hidden; padding:88px 0 84px; } .hero .wrap{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;} @media(max-width:900px){.hero .wrap{grid-template-columns:1fr; gap:44px;}} .hero-eyebrow{margin-bottom:20px;} .hero h1{font-size:50px; line-height:1.12; margin-bottom:20px; letter-spacing:-.02em;} @media(max-width:640px){.hero h1{font-size:34px;}} .hero .headline{font-size:19px; color:#EDEBE3; font-weight:400; max-width:52ch; margin-bottom:14px; font-family:'Fraunces',serif;} .hero .body-text{font-size:15.5px; color:#C7CEDB; max-width:50ch; margin-bottom:16px;} .hero .body-text strong{color:#fff; font-weight:600;} .hero .cta-row{margin-top:26px;} .hero-visual{position:relative;} /* ---------- CARDS / GROUPS ---------- */ .groups{display:grid; grid-template-columns:1fr 1fr; gap:24px;} @media(max-width:760px){.groups{grid-template-columns:1fr;}} .group-card{background:#fff; border:1px solid var(--line); border-radius:16px; padding:30px 28px;} .group-card h3{font-size:12.5px; text-transform:uppercase; letter-spacing:.1em; font-weight:700; color:var(--ink); font-family:'Inter',sans-serif; margin-bottom:18px; display:flex; align-items:center; gap:10px;} .group-card h3 .dot{width:7px; height:7px; border-radius:50%; background:var(--accent); display:inline-block; flex-shrink:0;} .group-card li{padding:12px 0; border-top:1px solid var(--line); font-size:15px; color:#2A2F3B; display:flex; gap:10px;} .group-card li:first-child{border-top:none;} .group-card li::before{content:"—"; color:var(--accent); flex-shrink:0;} .card-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;} @media(max-width:900px){.card-grid{grid-template-columns:1fr 1fr;}} @media(max-width:560px){.card-grid{grid-template-columns:1fr;}} .card-grid.cols-3{grid-template-columns:repeat(3,1fr);} @media(max-width:900px){.card-grid.cols-3{grid-template-columns:1fr 1fr;}} @media(max-width:560px){.card-grid.cols-3{grid-template-columns:1fr;}} .card-grid.cols-5{grid-template-columns:repeat(5,1fr);} @media(max-width:1000px){.card-grid.cols-5{grid-template-columns:repeat(3,1fr);}} @media(max-width:640px){.card-grid.cols-5{grid-template-columns:1fr 1fr;}} .info-card{background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px 22px;} /* Hover-lift only on cards that are real links (Fase 1, hallazgo #1) — never on static/label-only cards */ a > .info-card{transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out), border-color .2s var(--ease-out);} @media(hover:hover) and (pointer:fine){ a > .info-card:hover{transform:translateY(-4px); box-shadow:0 14px 32px rgba(20,33,61,.10); border-color:var(--accent-2);} } .info-card .ic-num{ width:32px; height:32px; border-radius:50%; background:var(--paper-2); color:var(--accent); font-family:'Fraunces',serif; font-weight:600; font-size:14px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; } .info-card .ic-icon{margin-bottom:16px; color:var(--accent);} .info-card h3{font-size:15.5px; margin-bottom:8px; line-height:1.3;} .info-card p{font-size:13.5px; color:var(--slate);} /* ---------- CALLOUT / HIGHLIGHT ---------- */ .callout{ background:var(--paper-2); border-left:3px solid var(--accent); padding:16px 20px; border-radius:0 10px 10px 0; font-size:14.5px; color:var(--ink); margin:20px 0; } .callout.on-ink{background:rgba(255,255,255,.06); border-left-color:var(--accent-2); color:#EDEBE3;} .quote-card{background:var(--ink); color:#fff; border-radius:16px; padding:28px 28px;} .quote-card p{font-family:'Fraunces',serif; font-size:18px; line-height:1.4;} .quote-card.outline{background:transparent; border:1px solid var(--line); color:var(--ink);} /* ---------- INLINE CTA BANNER ---------- */ .inline-cta{ margin-top:44px; background:var(--ink); color:#fff; border-radius:18px; padding:34px 38px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; } .inline-cta p{font-family:'Fraunces',serif; font-size:19px; max-width:46ch; line-height:1.35;} .inline-cta p span{display:block; font-family:'Inter',sans-serif; font-size:13.5px; color:#AAB6CA; margin-top:6px; font-weight:500;} /* ---------- PROCESS: horizontal numbered steps (real sequences only) ---------- */ .steps-row{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:12px;} .steps-row.n5{grid-template-columns:repeat(5,1fr);} .steps-row.n6{grid-template-columns:repeat(3,1fr);} .steps-row.n2{grid-template-columns:1fr 1fr;} @media(max-width:900px){.steps-row, .steps-row.n5, .steps-row.n6, .steps-row.n2{grid-template-columns:1fr; gap:28px;}} /* ---------- MEDIA + CONTENT SPLIT (photo slot beside steps/copy) ---------- */ .media-split{display:grid; grid-template-columns:.85fr 1.15fr; gap:44px; align-items:center;} @media(max-width:900px){.media-split{grid-template-columns:1fr;}} .step-col{position:relative; padding:0 22px 0 0;} .step-col:last-child{padding-right:0;} .step-num{font-family:'Fraunces',serif; font-size:15px; color:var(--accent); font-weight:600; display:flex; align-items:center; gap:12px; margin-bottom:16px;} .step-num .bar{height:1px; background:var(--line); flex:1;} .step-col:last-child .step-num .bar{display:none;} @media(max-width:900px){.step-col .step-num .bar{display:none;}} .step-col h3{font-size:16px; margin-bottom:8px; line-height:1.3;} .step-col p{font-size:14px; color:var(--slate);} /* Two side-by-side vertical step lists (used without a photo panel) */ .vsteps-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 44px;} @media(max-width:760px){.vsteps-grid{grid-template-columns:1fr;}} /* Vertical step list (used when paired with a side panel) */ .vsteps{display:flex; flex-direction:column;} .vstep{display:flex; gap:20px; padding:22px 0; border-top:1px solid var(--line);} .vstep:first-child{border-top:none; padding-top:0;} .vstep .vnum{font-family:'Fraunces',serif; font-size:20px; color:var(--accent); font-weight:600; width:34px; flex-shrink:0;} .vstep h3{font-size:16px; margin-bottom:6px;} .vstep p{font-size:14.5px; color:var(--slate); margin-bottom:8px;} .vstep li{font-size:14px; color:var(--slate); padding:5px 0 5px 18px; position:relative;} .vstep li::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--accent); position:absolute; left:0; top:12px;} /* ---------- SPLIT / CONTRAST PANEL ---------- */ .split{display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:20px; overflow:hidden;} @media(max-width:820px){.split{grid-template-columns:1fr;}} .split > div{padding:40px 38px;} .split .can{background:var(--good-bg); border-right:1px solid var(--line);} @media(max-width:820px){.split .can{border-right:none; border-bottom:1px solid var(--line);}} .split .cannot{background:var(--limit-bg);} .split h3{font-family:'Inter',sans-serif; font-size:12.5px; text-transform:uppercase; letter-spacing:.1em; font-weight:700; margin-bottom:20px; display:flex; align-items:center; gap:9px;} .split .can h3{color:var(--good);} .split .cannot h3{color:var(--limit);} .split h3 .mark{width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; color:#fff; flex-shrink:0;} .split .can h3 .mark{background:var(--good);} .split .cannot h3 .mark{background:var(--limit);} .split li{padding:10px 0; border-top:1px solid rgba(0,0,0,.06); font-size:14.5px; display:flex; gap:10px;} .split li:first-child{border-top:none;} .split p.lead{color:var(--slate); font-size:15px; margin-bottom:20px;} .split p.close{font-size:14px; color:var(--slate); margin-top:18px; padding-top:16px; border-top:1px solid rgba(0,0,0,.08);} /* ---------- SUBSECTION BOX ---------- */ .subsection-box{ margin-top:40px; background:var(--paper-2); border-radius:18px; padding:36px 38px; display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap; } .subsection-box .txt{max-width:520px;} .subsection-box h3{font-size:19px; margin-bottom:10px;} .subsection-box p{font-size:14.5px; color:var(--slate); margin-bottom:6px;} /* ---------- FAQ ---------- */ .faq-list{border-top:1px solid var(--line); margin-top:8px;} .faq-item{border-bottom:1px solid var(--line);} .faq-q{ width:100%; text-align:left; background:none; border:none; padding:24px 0; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px; font-size:16.5px; font-weight:600; color:var(--ink); } .faq-q .plus{width:26px; height:26px; border-radius:50%; border:1px solid var(--line); flex-shrink:0; display:flex; align-items:center; justify-content:center; position:relative; transition:transform .25s ease, background .2s ease;} .faq-q .plus::before, .faq-q .plus::after{content:""; position:absolute; background:var(--ink);} .faq-q .plus::before{width:10px; height:1.4px;} .faq-q .plus::after{width:1.4px; height:10px; transition:opacity .2s ease;} .faq-item.open .faq-q .plus{background:var(--ink); transform:rotate(180deg);} .faq-item.open .faq-q .plus::before, .faq-item.open .faq-q .plus::after{background:#fff;} .faq-item.open .faq-q .plus::after{opacity:0;} .faq-a{max-height:0; overflow:hidden; transition:max-height .32s ease;} .faq-a p{padding:0 0 26px; color:var(--slate); font-size:15px; max-width:70ch;} /* ---------- FINAL CTA ---------- */ .final-cta-wrap{padding:20px 0 100px;} @media(max-width:640px){.final-cta-wrap{padding:10px 0 60px;}} .final-cta{ background:linear-gradient(160deg,var(--ink) 0%, var(--ink-2) 100%); color:#fff; text-align:center; border-radius:28px; margin:0 32px; padding:76px 40px; } @media(max-width:640px){.final-cta{margin:0 16px; padding:56px 24px; border-radius:20px;}} .final-cta .eyebrow{justify-content:center; display:flex; margin-bottom:18px;} .final-cta h2{font-size:32px; max-width:24ch; margin:0 auto 18px; line-height:1.25;} @media(max-width:640px){.final-cta h2{font-size:24px;}} .final-cta p{color:#C7CEDB; max-width:50ch; margin:0 auto 34px; font-size:15.5px;} .final-cta .cta-row{justify-content:center;} /* ---------- FOOTER ---------- */ .site-footer{background:var(--ink); color:#C7CEDB; padding:72px 0 32px;} .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid var(--line-ink);} @media(max-width:820px){.footer-grid{grid-template-columns:1fr 1fr; row-gap:36px;}} @media(max-width:480px){.footer-grid{grid-template-columns:1fr;}} .footer-grid h4{font-family:'Fraunces',serif; color:#fff; font-size:17px; margin-bottom:14px; font-weight:600;} .footer-grid .foot-label{font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:#8593AC; margin-bottom:14px; font-weight:700;} .footer-grid p{font-size:14px; color:#AAB6CA; max-width:32ch;} .footer-grid ul li{margin-bottom:10px;} .footer-grid a{font-size:14px; color:#C7CEDB; text-decoration:none;} .footer-grid a:hover{color:#fff;} .footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:28px; flex-wrap:wrap; gap:12px;} .footer-bottom p{font-size:12.5px; color:#8593AC;} .footer-bottom a{font-size:12.5px; color:#8593AC; text-decoration:underline;} /* ---------- REVEAL ---------- */ /* Content reveals use a gentler curve than interactive feedback (Fase 1, hallazgo #2) */ .reveal{opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease-content), transform .6s var(--ease-content);} .reveal.in{opacity:1; transform:translateY(0);} /* Stagger direct children of card grids and step rows as they reveal */ .card-grid.reveal, .steps-row.reveal{opacity:1; transform:none; transition:none;} .card-grid.reveal > *, .steps-row.reveal > *{ opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease-content), transform .5s var(--ease-content); } .card-grid.reveal.in > *, .steps-row.reveal.in > *{opacity:1; transform:translateY(0);} .card-grid.reveal > *:nth-child(2), .steps-row.reveal > *:nth-child(2){transition-delay:60ms;} .card-grid.reveal > *:nth-child(3), .steps-row.reveal > *:nth-child(3){transition-delay:120ms;} .card-grid.reveal > *:nth-child(4), .steps-row.reveal > *:nth-child(4){transition-delay:180ms;} .card-grid.reveal > *:nth-child(5), .steps-row.reveal > *:nth-child(5){transition-delay:240ms;} @media(prefers-reduced-motion:reduce){ .reveal, .card-grid.reveal > *, .steps-row.reveal > *{opacity:1; transform:none; transition:none;} html{scroll-behavior:auto;} } /* ---------- EDUCATIONAL HERO DIAGRAMS (Fase 1 — one per page, not reusable) ---------- */ /* Ronquido: a row of z/Z letters, sized like a soundwave envelope, each bobbing independently — a gentle equalizer made of "zzz" */ .zzz-wave-hero .zw-letter{transform-box:fill-box; transform-origin:center;} @media(prefers-reduced-motion:no-preference){ .zzz-wave-hero .zw-1{animation:zw-bob-sm 2.6s ease-in-out infinite;} .zzz-wave-hero .zw-2{animation:zw-bob-md 2.9s ease-in-out infinite; animation-delay:.3s;} .zzz-wave-hero .zw-3{animation:zw-bob-lg 2.4s ease-in-out infinite; animation-delay:.5s;} .zzz-wave-hero .zw-4{animation:zw-bob-lg 2.7s ease-in-out infinite; animation-delay:.15s;} .zzz-wave-hero .zw-5{animation:zw-bob-sm 3.1s ease-in-out infinite; animation-delay:.6s;} } @keyframes zw-bob-sm{0%, 100%{transform:translateY(0);} 50%{transform:translateY(-3px);}} @keyframes zw-bob-md{0%, 100%{transform:translateY(0);} 50%{transform:translateY(-4px);}} @keyframes zw-bob-lg{0%, 100%{transform:translateY(0);} 50%{transform:translateY(-6px);}} /* Estudios del sueño: the 5 channel dots light up in sequence, hold, then dim together — loops like a device self-check */ @media(prefers-reduced-motion:no-preference){ .wave-panel .channel-1{animation:chan-light-1 6s ease-in-out infinite;} .wave-panel .channel-2{animation:chan-light-2 6s ease-in-out infinite;} .wave-panel .channel-3{animation:chan-light-3 6s ease-in-out infinite;} .wave-panel .channel-4{animation:chan-light-4 6s ease-in-out infinite;} .wave-panel .channel-5{animation:chan-light-5 6s ease-in-out infinite;} } @keyframes chan-light-1{ 0%, 8%, 86%, 100%{color:#5B6472;} 14%, 78%{color:#A9C4DC;} } @keyframes chan-light-2{ 0%, 15%, 86%, 100%{color:#5B6472;} 21%, 78%{color:#A9C4DC;} } @keyframes chan-light-3{ 0%, 22%, 86%, 100%{color:#5B6472;} 28%, 78%{color:#A9C4DC;} } @keyframes chan-light-4{ 0%, 29%, 86%, 100%{color:#5B6472;} 35%, 78%{color:#A9C4DC;} } @keyframes chan-light-5{ 0%, 36%, 86%, 100%{color:#5B6472;} 42%, 78%{color:#A9C4DC;} } @media(prefers-reduced-motion:reduce){ .wave-panel .channel-1, .wave-panel .channel-2, .wave-panel .channel-3, .wave-panel .channel-4, .wave-panel .channel-5{color:#A9C4DC;} } /* Ortodoncia: the corrected tooth resolves, the dimension line draws in, then the plan label appears — once, on first view */ .blueprint-hero .bp-after-tooth{opacity:0; transition:opacity .5s var(--ease-content);} .blueprint-hero .bp-dim-line{stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .5s var(--ease-content);} .blueprint-hero .bp-tick{opacity:0; transition:opacity .3s var(--ease-content);} .blueprint-hero .bp-label-line{stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .5s var(--ease-content);} .blueprint-hero .bp-label-text{opacity:0; transition:opacity .5s var(--ease-content);} .blueprint-hero.in .bp-after-tooth{opacity:1;} .blueprint-hero.in .bp-dim-line{stroke-dashoffset:0; transition-delay:300ms;} .blueprint-hero.in .bp-tick{opacity:1; transition-delay:850ms;} .blueprint-hero.in .bp-label-line{stroke-dashoffset:0; transition-delay:1000ms;} .blueprint-hero.in .bp-label-text{opacity:1; transition-delay:1600ms;} @media(prefers-reduced-motion:reduce){ .blueprint-hero .bp-after-tooth, .blueprint-hero .bp-tick, .blueprint-hero .bp-label-text{opacity:1; transition:none;} .blueprint-hero .bp-dim-line, .blueprint-hero .bp-label-line{stroke-dashoffset:0; transition:none;} } /* Apnea: a soft, muted marker traces the airflow line and dwells at each "pausa" — conceptual, not a live physiological readout */ .airflow-marker{opacity:0;} @media(prefers-reduced-motion:no-preference){ .airflow-marker{animation:airflow-travel 9s ease-in-out infinite;} } @keyframes airflow-travel{ 0% {offset-distance:0%; opacity:0;} 5% {opacity:.85;} 30% {offset-distance:35%; opacity:.85;} 42% {offset-distance:35%; opacity:.85;} 48% {opacity:.85;} 66% {offset-distance:69%; opacity:.85;} 78% {offset-distance:69%; opacity:.85;} 96% {offset-distance:100%; opacity:.85;} 100% {offset-distance:100%; opacity:0;} } /* Ortopedia: the palate expander screw ticks and its arrows pulse, once, the first time the hero enters view, then holds expanded */ .expander-hero .ex-screw{transform-box:fill-box; transform-origin:center;} .expander-hero .ex-arrow{transform-box:fill-box; transform-origin:center; opacity:.6;} @media(prefers-reduced-motion:no-preference){ .expander-hero.in .ex-screw{animation:ex-screw-tick 2.4s linear forwards;} .expander-hero.in .ex-arrow{animation:ex-arrow-pulse 2.4s ease-in-out forwards;} } @keyframes ex-screw-tick{ 0%{transform:rotate(0deg);} 15%{transform:rotate(90deg);} 55%{transform:rotate(180deg);} 95%{transform:rotate(270deg);} 100%{transform:rotate(270deg);} } @keyframes ex-arrow-pulse{ 0%, 100%{opacity:.6;} 15%, 55%, 95%{opacity:1;} } @media(prefers-reduced-motion:reduce){ .expander-hero .ex-screw{transform:rotate(270deg);} .expander-hero .ex-arrow{opacity:1;} } /* Agenda: a thin accent rule draws in under the heading — once, on first view */ .agenda-rule{width:64px; height:2px; background:var(--accent-2); margin:16px 0 20px; transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease-content);} .agenda-hero.in .agenda-rule{transform:scaleX(1);} @media(prefers-reduced-motion:reduce){ .agenda-rule{transform:scaleX(1); transition:none;} } /* Home: a small highlight travels center → each pillar node → back to center, once, on first view */ .focus-ring-hero .fr-highlight{opacity:0;} @media(prefers-reduced-motion:no-preference){ .focus-ring-hero.in .fr-highlight{animation:fr-sweep 3.6s var(--ease-content) both;} } .focus-ring-hero .fr-node{opacity:.4; transition:opacity .5s var(--ease-content);} .focus-ring-hero.in .fr-node-1{opacity:1; transition-delay:380ms;} .focus-ring-hero.in .fr-node-2{opacity:1; transition-delay:1580ms;} .focus-ring-hero.in .fr-node-3{opacity:1; transition-delay:2780ms;} @keyframes fr-sweep{ 0% {transform:translate(0,0); opacity:.9;} 12% {transform:translate(0,-95px); opacity:1;} 22% {transform:translate(0,-95px); opacity:1;} 34% {transform:translate(0,0); opacity:.9;} 46% {transform:translate(-82px,48px); opacity:1;} 56% {transform:translate(-82px,48px); opacity:1;} 68% {transform:translate(0,0); opacity:.9;} 80% {transform:translate(82px,48px); opacity:1;} 90% {transform:translate(82px,48px); opacity:1;} 100% {transform:translate(0,0); opacity:.9;} } @media(prefers-reduced-motion:reduce){ .focus-ring-hero .fr-highlight{opacity:.9;} .focus-ring-hero .fr-node{opacity:1; transition:none;} } /* Sueño hub: the trace breathes like respiration; at its peak a small '?' briefly resolves, then continues — loops gently */ @media(prefers-reduced-motion:no-preference){ .breath-question-hero .bq-line{ transform-box:fill-box; transform-origin:center; animation:bq-breathe 5.2s ease-in-out infinite; } } @keyframes bq-breathe{ 0%, 100%{transform:scaleY(1);} 50% {transform:scaleY(1.09);} } .breath-question-hero .bq-mark{opacity:0;} @media(prefers-reduced-motion:no-preference){ .breath-question-hero .bq-mark{animation:bq-mark-resolve 5.2s ease-in-out infinite;} } @keyframes bq-mark-resolve{ 0%, 35%, 100%{opacity:0;} 50% {opacity:.85;} 68% {opacity:0;} } /* ---------- PHOTO SLOT (intentional placeholder for real photography) ---------- */ .photo-slot{ aspect-ratio:4/5; border-radius:14px; border:1px dashed var(--line); background:repeating-linear-gradient(135deg, var(--paper-2), var(--paper-2) 10px, #fff 10px, #fff 20px); display:flex; align-items:center; justify-content:center; text-align:center; padding:20px; margin-bottom:18px; } .photo-slot span{font-size:12px; color:var(--slate); font-weight:600; max-width:16ch; line-height:1.4;} .photo-slot.wide{aspect-ratio:16/10;} /* ---------- PHOTO (real photography) ---------- */ .photo{aspect-ratio:4/5; border-radius:14px; overflow:hidden; margin-bottom:18px;} .photo img{width:100%; height:100%; object-fit:cover; display:block;} .photo.wide{aspect-ratio:16/10;} /* ---------- NARRATIVE TIMELINE (vertical sequence — e.g. apnea mechanism) ---------- */ .timeline{position:relative; max-width:640px; padding-left:40px;} .timeline::before{content:""; position:absolute; left:13px; top:14px; bottom:14px; width:1.5px; background:var(--line);} .tl-node{position:relative; padding-bottom:32px;} .tl-node:last-child{padding-bottom:0;} .tl-num{ position:absolute; left:-40px; top:-2px; width:27px; height:27px; border-radius:50%; background:var(--paper); border:1.5px solid var(--accent); color:var(--accent); font-family:'Fraunces',serif; font-size:12.5px; font-weight:600; display:flex; align-items:center; justify-content:center; } .tl-node h3{font-size:15.5px; margin-bottom:4px; color:var(--ink);} .tl-node p{font-size:14px; color:var(--slate);} .tl-node.climax{background:var(--paper-2); border-radius:14px; padding:18px 20px 18px 24px; margin-left:-24px;} .tl-node.climax .tl-num{background:var(--ink); border-color:var(--ink); color:#fff; left:-16px;} .tl-node.climax h3{font-family:'Fraunces',serif; font-size:17px;} .tl-node.climax li{font-size:13.5px; color:var(--slate); padding:4px 0 4px 16px; position:relative;} .tl-node.climax li::before{content:""; width:4px; height:4px; border-radius:50%; background:var(--accent); position:absolute; left:0; top:11px;} @media(max-width:480px){ .timeline{padding-left:34px;} .timeline::before{left:11px;} .tl-num{left:-34px; width:23px; height:23px; font-size:11px;} .tl-node.climax{margin-left:-14px; padding-left:18px;} .tl-node.climax .tl-num{left:-10px;} } /* ---------- MEDICAL CONTEXT NOTE (separated from day-to-day symptom lists) ---------- */ .context-note{ border:1px solid var(--line); border-radius:14px; padding:20px 24px; margin-top:28px; background:#fff; max-width:640px; } .context-note .cn-label{font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--slate); margin-bottom:8px;} .context-note p{font-size:14px; color:var(--slate);} /* ---------- BOOKING PANEL (Doctoralia widget container — agenda.html) ---------- */ .booking-panel{ max-width:900px; margin:0 auto; padding:36px; background:#fff; border:1px solid var(--line); border-radius:20px; } @media(max-width:640px){.booking-panel{padding:20px 16px; border-radius:16px;}} .booking-panel .zl-url{display:inline-block;} /* let Doctoralia's own widget styling take over once loaded */ .booking-fallback-note{font-size:12.5px; color:var(--slate); text-align:center; margin-top:14px;} .booking-secondary{max-width:640px; margin:56px auto 0; text-align:center;} .booking-secondary h2{font-size:20px; margin-bottom:8px;} .booking-secondary p{color:var(--slate); font-size:14.5px; margin-bottom:20px;} /* ---------- PRINCIPLE LIST (editorial alternative to generic value cards) ---------- */ .principle-list{border:1px solid var(--line); border-radius:18px; background:#fff; overflow:hidden;} .principle-row{display:grid; grid-template-columns:220px 1fr; gap:24px; padding:26px 30px; border-top:1px solid var(--line); align-items:baseline;} .principle-row:first-child{border-top:none;} @media(max-width:700px){.principle-row{grid-template-columns:1fr; gap:6px;}} .principle-row h3{font-family:'Fraunces',serif; font-size:17px; color:var(--ink);} .principle-row p{font-size:14.5px; color:var(--slate);} /* ============================================================ PAGE ACCENT OVERRIDES — each clinical topic gets its own accent color layered on the shared navy/paper base. This is the primary mechanism for "visual variation" between pages; components above never need page-specific CSS. ============================================================ */ body.page-home { --accent:#3E6FA6; --accent-2:#A9C4DC; } /* brand default: steel blue */ body.page-sleep { --accent:#3E6FA6; --accent-2:#A9C4DC; } /* respiration / integrated evaluation */ body.page-snoring { --accent:#3E8F8A; --accent-2:#A9D6D1; } /* airflow / vibration */ body.page-apnea { --accent:#6B5CA5; --accent-2:#C9C0E6; } /* obstruction / interruption */ body.page-studies { --accent:#3E6FA6; --accent-2:#A9C4DC; } /* recorded signal / measurement */ body.page-ortho { --accent:#AD7F3E; --accent-2:#E3CDA0; } /* movement / planning */ body.page-orthopedics{ --accent:#4C8B63; --accent-2:#B7D8C3; } /* growth / timing */