/* ========================================================================== Marlowe Plastic Surgery — "Meridian" theme Upshift plastic-surgery template · hand-written CSS, no build step, no externals. THE SYSTEM: the page borrows the drawing language of the surgical plan — calibration rules (tick marks + a measure label) open every section, registration corners frame every instrument readout, dotted amber leaders carry annotations, and sums close with a double rule. Drafting table, not sci-fi: paper grounds, hairlines, one petrol, one amber. HOW TO RE-SKIN: every color, font, radius and shadow lives in the :root token block below. Swap values there and the whole site follows. ========================================================================== */ :root{ /* Ground — cool porcelain, paper-flat */ --c-porcelain: #F2F5F3; /* page ground */ --c-white: #FFFFFF; /* sheets, cards, raised surfaces */ --c-tint: #E8EDEB; /* cool tint — alternating sections */ --c-tintDeep: #DCE4E1; /* deeper tint — figure grounds, photo slots */ /* Ink — graphite */ --c-ink: #1E282C; /* headings, primary text 13.7:1 on ground*/ --c-muted: #44545B; /* secondary text 7.2:1 on ground*/ /* Accent — deep surgical petrol */ --c-teal: #0B5560; /* CTAs, links, station labels 7.7:1 on ground*/ --c-tealDeep: #083E46; /* hover / pressed */ --c-tealWash: rgba(11,85,96,0.08); /* soft fills, key swatches */ /* Annotation — fine amber (margin-note color) */ --c-annot: #8A5A12; /* annotation TEXT 5.4:1 on ground*/ --c-annotLine: #B5801F; /* leaders, index ticks (lines) 3.2:1 on ground*/ --c-annotWash: rgba(181,128,31,0.10); /* Dark bands — graphite-teal, used for booking + footer */ --c-deep: #142629; /* CTA band */ --c-deepFoot: #0E1B1D; /* footer / gradient partner */ --c-onDark: #EDF3F1; /* text on dark 14.0:1 on deep */ --c-onDarkMuted: #ADC0BC; /* secondary on dark 8.3:1 on deep */ --c-tealBright: #7EC3CE; /* petrol accents on dark 7.9:1 on deep */ --c-annotBright: #D8A751; /* amber accents on dark 7.1:1 on deep */ /* Lines — the drawing itself */ --c-line: #D3DDD9; /* hairlines, minor ticks */ --c-lineStrong: #758B84; /* major ticks, rules, frames 3.3:1 on ground*/ --c-lineOnDark: rgba(237,243,241,0.18); /* States */ --c-error: #A93D33; --c-success: #2E6B4F; /* Shape + depth — square, drafting-flat */ --r-card: 2px; --r-btn: 2px; --shadow-card: 0 14px 30px -26px rgba(20,38,41,0.35); --shadow-btn: 0 10px 20px -14px rgba(11,85,96,0.55); /* Type */ --f-display: 'Space Grotesk', 'Avenir Next', 'Segoe UI', system-ui, sans-serif; --f-text: 'IBM Plex Sans', 'Helvetica Neue', 'Segoe UI', system-ui, sans-serif; --f-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Spacing rhythm (4px base) */ --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; } /* -------------------------------------------------------------------------- Reset + base -------------------------------------------------------------------------- */ *{margin:0;padding:0;box-sizing:border-box} /* scroll-behavior:smooth on makes Chrome DROP the scroll on a cross-document #fragment navigation — every "Details" link to another page landed the visitor at the top instead of the promised section. Verified: with smooth, scrollY stayed 0; with auto it lands exactly on scroll-margin-top. Keep this auto. A JS shim would fix smooth, but these templates ship with zero dependencies and that is the point. */ html{scroll-behavior:auto} body{background:var(--c-porcelain);color:var(--c-ink);font-family:var(--f-text); font-size:15.5px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} img,svg{display:block;max-width:100%} a{text-decoration:none;color:inherit;transition:opacity 150ms ease,background-color 150ms ease, border-color 150ms ease,color 150ms ease} a:hover{opacity:.85} ul{list-style:none} button{font:inherit;cursor:pointer} [id]{scroll-margin-top:96px} :focus-visible{outline:2.5px solid var(--c-teal);outline-offset:3px;border-radius:2px} .bg-deep :focus-visible,.site-footer :focus-visible{outline-color:var(--c-tealBright)} .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--c-white); color:var(--c-teal);font-family:var(--f-mono);font-weight:600;font-size:13px; padding:12px 18px;border:1px solid var(--c-teal)} .skip:focus{left:12px;top:12px} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{transition:none !important;animation:none !important} } /* -------------------------------------------------------------------------- THE SIGNATURE — the calibration rule. A ruler strip: minor ticks every 8px (60% height), major every 40px (full), on a solid baseline. Every section opens with one + a measure label. -------------------------------------------------------------------------- */ .crule{position:relative;flex:1 1 64px;height:10px;min-width:56px} .crule::before{content:"";position:absolute;inset:0; background-image: repeating-linear-gradient(90deg,var(--c-lineStrong) 0 1px,transparent 1px 40px), repeating-linear-gradient(90deg,var(--c-line) 0 1px,transparent 1px 8px); background-size:100% 100%,100% 60%; background-position:left bottom,left bottom; background-repeat:no-repeat} .crule::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px; background:var(--c-lineStrong)} .crule.on-dark::before{background-image: repeating-linear-gradient(90deg,rgba(237,243,241,0.55) 0 1px,transparent 1px 40px), repeating-linear-gradient(90deg,var(--c-lineOnDark) 0 1px,transparent 1px 8px)} .crule.on-dark::after{background:rgba(237,243,241,0.55)} .crule.amber::before{background-image: repeating-linear-gradient(90deg,var(--c-annotLine) 0 1px,transparent 1px 40px), repeating-linear-gradient(90deg,var(--c-line) 0 1px,transparent 1px 8px)} .crule.amber::after{background:var(--c-annotLine)} /* Section head: station code · rule · measure label, then the heading */ .shead{display:flex;align-items:center;gap:14px;width:100%} .shead .t-measure{text-align:right} @media (max-width:659px){ .shead{flex-wrap:wrap;row-gap:8px} .shead .crule{order:3;flex-basis:100%} .shead .t-measure{text-align:left} } /* Registration corners — crop-mark frame for instrument readouts */ .reg{--tick:var(--c-lineStrong); background-image: linear-gradient(var(--tick),var(--tick)),linear-gradient(var(--tick),var(--tick)), linear-gradient(var(--tick),var(--tick)),linear-gradient(var(--tick),var(--tick)), linear-gradient(var(--tick),var(--tick)),linear-gradient(var(--tick),var(--tick)), linear-gradient(var(--tick),var(--tick)),linear-gradient(var(--tick),var(--tick)); background-size:14px 1px,1px 14px,14px 1px,1px 14px,14px 1px,1px 14px,14px 1px,1px 14px; background-position:top left,top left,top right,top right, bottom left,bottom left,bottom right,bottom right; background-repeat:no-repeat} .reg.on-dark{--tick:rgba(237,243,241,0.5)} .reg.amber{--tick:var(--c-annotLine)} /* Dotted amber leader — annotation connector */ .leader{flex:1;height:1px;min-width:24px;align-self:center; background:repeating-linear-gradient(90deg,var(--c-annotLine) 0 2px,transparent 2px 7px)} /* Hatch — the "void" fill for photo slots (45° hairlines) */ .hatch{background-color:var(--c-tintDeep); background-image:repeating-linear-gradient(45deg,rgba(117,139,132,0.35) 0 1px,transparent 1px 9px)} /* Hatch + registration corners combined (photo slots) */ .hatch.reg{--tick:var(--c-lineStrong); background-image: linear-gradient(var(--tick),var(--tick)),linear-gradient(var(--tick),var(--tick)), linear-gradient(var(--tick),var(--tick)),linear-gradient(var(--tick),var(--tick)), linear-gradient(var(--tick),var(--tick)),linear-gradient(var(--tick),var(--tick)), linear-gradient(var(--tick),var(--tick)),linear-gradient(var(--tick),var(--tick)), repeating-linear-gradient(45deg,rgba(117,139,132,0.35) 0 1px,transparent 1px 9px); background-size:14px 1px,1px 14px,14px 1px,1px 14px,14px 1px,1px 14px,14px 1px,1px 14px,auto; background-position:top left,top left,top right,top right, bottom left,bottom left,bottom right,bottom right,0 0; background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,repeat} /* Scale-break glyph — drafting convention for a non-linear jump */ .sbreak{position:relative;display:inline-block;width:20px;height:16px;vertical-align:-3px} .sbreak::before,.sbreak::after{content:"";position:absolute;top:-2px;bottom:-2px;width:1.5px; background:var(--c-lineStrong);transform:rotate(24deg)} .sbreak::before{left:6px} .sbreak::after{left:12px} /* -------------------------------------------------------------------------- Type scale — display Space Grotesk · text IBM Plex Sans · measures Plex Mono -------------------------------------------------------------------------- */ .t-display{font-family:var(--f-display);font-weight:600;font-size:clamp(36px,3.2vw + 24px,58px); line-height:1.06;letter-spacing:-0.02em;color:var(--c-ink)} .t-h2{font-family:var(--f-display);font-weight:600;font-size:clamp(27px,1.6vw + 21px,38px); line-height:1.12;letter-spacing:-0.014em;color:var(--c-ink)} .t-h3{font-family:var(--f-display);font-weight:600;font-size:22px;line-height:1.22;color:var(--c-ink)} .t-title{font-family:var(--f-display);font-weight:600;font-size:19px;line-height:1.3;color:var(--c-ink)} .t-lead{font-size:17.5px;line-height:1.62;color:var(--c-muted)} .t-body{font-size:15.5px;line-height:1.66;color:var(--c-muted)} .t-bodyStrong{font-weight:600;font-size:15.5px;line-height:1.5;color:var(--c-ink)} .t-small{font-size:13.5px;line-height:1.58;color:var(--c-muted)} .t-fine{font-size:12.5px;line-height:1.58;color:var(--c-muted)} .t-station{font-family:var(--f-mono);font-weight:600;font-size:12px;line-height:1.4; letter-spacing:0.08em;color:var(--c-teal);white-space:nowrap} .t-measure{font-family:var(--f-mono);font-weight:400;font-size:11.5px;line-height:1.5; letter-spacing:0.1em;text-transform:uppercase;color:var(--c-muted)} .t-annot{font-family:var(--f-mono);font-weight:600;font-size:11.5px;line-height:1.5; letter-spacing:0.1em;text-transform:uppercase;color:var(--c-annot)} .t-readout{font-family:var(--f-mono);font-weight:600;font-size:clamp(24px,1.4vw + 18px,32px); line-height:1.1;color:var(--c-ink);font-variant-numeric:tabular-nums;letter-spacing:-0.02em} .t-mnum{font-family:var(--f-mono);font-weight:600;font-size:15px;color:var(--c-ink); font-variant-numeric:tabular-nums;white-space:nowrap} .t-navLink{font-family:var(--f-text);font-weight:500;font-size:15px;line-height:1.2;color:var(--c-ink)} /* on-dark variants */ .t-h2Light{font-family:var(--f-display);font-weight:600;font-size:clamp(27px,1.6vw + 21px,38px); line-height:1.12;letter-spacing:-0.014em;color:var(--c-onDark)} .t-leadLight{font-size:17.5px;line-height:1.62;color:var(--c-onDarkMuted)} .t-bodyLight{font-size:15.5px;line-height:1.66;color:var(--c-onDarkMuted)} .t-smallLight{font-size:13.5px;line-height:1.58;color:var(--c-onDarkMuted)} .t-fineLight{font-size:12.5px;line-height:1.58;color:var(--c-onDarkMuted)} .t-stationLight{font-family:var(--f-mono);font-weight:600;font-size:12px;line-height:1.4; letter-spacing:0.08em;color:var(--c-tealBright);white-space:nowrap} .t-measureLight{font-family:var(--f-mono);font-weight:400;font-size:11.5px;line-height:1.5; letter-spacing:0.1em;text-transform:uppercase;color:var(--c-onDarkMuted)} /* -------------------------------------------------------------------------- Buttons + chips — 44px+ targets everywhere -------------------------------------------------------------------------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:48px;padding:13px 26px;border-radius:var(--r-btn);background:var(--c-teal); font-family:var(--f-display);font-weight:600;font-size:15.5px;color:#fff; box-shadow:var(--shadow-btn);border:none;width:fit-content} .btn:hover{background:var(--c-tealDeep);opacity:1} .btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:48px;padding:11.5px 24px;border-radius:var(--r-btn);border:1.5px solid var(--c-teal); font-family:var(--f-display);font-weight:600;font-size:15.5px;color:var(--c-teal);width:fit-content} .btn-ghost:hover{background:var(--c-tealWash);opacity:1} .btn-light{display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:48px;padding:13px 26px;border-radius:var(--r-btn);background:var(--c-porcelain); font-family:var(--f-display);font-weight:600;font-size:15.5px;color:var(--c-ink);width:fit-content} .btn-lightGhost{display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:48px;padding:11.5px 24px;border-radius:var(--r-btn);border:1.5px solid var(--c-lineOnDark); font-family:var(--f-display);font-weight:600;font-size:15.5px;color:var(--c-onDark);width:fit-content} .btn-sm{min-height:44px;padding:10px 18px;font-size:14.5px} .btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center} .textlink{display:inline-flex;align-items:center;min-height:28px;font-family:var(--f-text); font-weight:600;font-size:15px;color:var(--c-teal)} .textlink:hover{text-decoration:underline;text-underline-offset:4px;opacity:1} .chip{display:inline-flex;align-items:center;gap:9px;min-height:38px;padding:8px 14px; background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-card); font-size:13.5px;color:var(--c-ink)} .chip .tickbox{width:14px;height:14px;flex-shrink:0;border:1px solid var(--c-teal); display:inline-flex;align-items:center;justify-content:center} .chip-row{display:flex;flex-wrap:wrap;gap:10px} /* -------------------------------------------------------------------------- Header + nav -------------------------------------------------------------------------- */ .site-header{position:sticky;top:0;z-index:100;background:var(--c-porcelain); border-bottom:1px solid var(--c-line)} .header-bar{display:flex;align-items:center;justify-content:space-between;gap:24px; max-width:1188px;margin:0 auto;padding:12px 24px} .wordmark{display:flex;align-items:center;gap:12px;width:fit-content;min-height:44px} .wordmark svg{flex-shrink:0} .wordmark-stack{display:flex;flex-direction:column;gap:2px} .wordmark-name{font-family:var(--f-display);font-weight:600;font-size:19px; letter-spacing:0.01em;color:var(--c-ink);line-height:1.1} .wordmark-sub{font-family:var(--f-mono);font-weight:400;font-size:9.5px;letter-spacing:0.18em; text-transform:uppercase;color:var(--c-muted)} .site-nav{display:flex;gap:4px;align-items:center} .site-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px} .header-actions{display:flex;gap:14px;align-items:center} .header-phone{display:inline-flex;align-items:center;min-height:44px; font-family:var(--f-mono);font-weight:600;font-size:13.5px;color:var(--c-ink)} .quicknav{display:none;gap:4px;align-items:center;overflow-x:auto;padding:0 20px 6px; -webkit-overflow-scrolling:touch} .quicknav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px; font-family:var(--f-mono);font-weight:600;font-size:12.5px;letter-spacing:0.06em; color:var(--c-teal);white-space:nowrap} @media (max-width:1019px){ .site-nav,.header-phone{display:none} .quicknav{display:flex} } /* Sticky mobile call / book bar */ .mobilebar{display:none} @media (max-width:819px){ .mobilebar{display:grid;grid-template-columns:1fr 1.2fr;gap:10px;position:fixed; bottom:0;left:0;right:0;z-index:110;padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(242,245,243,0.96);border-top:1px solid var(--c-line);backdrop-filter:blur(8px)} .mobilebar .btn,.mobilebar .btn-ghost{width:100%;padding-left:8px;padding-right:8px;font-size:14.5px} body{padding-bottom:76px} } /* -------------------------------------------------------------------------- Sections + layout -------------------------------------------------------------------------- */ .section{display:flex;flex-direction:column;align-items:center; padding:var(--sp-9) 24px;background:var(--c-porcelain)} .section.tight{padding:var(--sp-8) 24px} .bg-white{background:var(--c-white)} .bg-tint{background:var(--c-tint)} .bg-deep{background:linear-gradient(172deg,var(--c-deep),var(--c-deepFoot))} .inner{width:100%;max-width:1140px;display:flex;flex-direction:column;gap:var(--sp-7)} .inner.narrow{max-width:800px} .section-head{display:flex;flex-direction:column;gap:16px;align-items:flex-start;width:100%} .section-head .t-lead{max-width:640px} .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .split{display:grid;grid-template-columns:6fr 5fr;gap:64px;align-items:center} .split.rev{grid-template-columns:5fr 6fr} .split.top{align-items:flex-start} @media (max-width:1099px){ .grid-4{grid-template-columns:repeat(2,1fr)} .split,.split.rev{gap:40px} } @media (max-width:819px){ .section{padding:var(--sp-8) 20px} .section.tight{padding:var(--sp-7) 20px} .grid-2,.grid-3,.grid-4{grid-template-columns:1fr} .split,.split.rev{grid-template-columns:1fr;gap:36px} .inner{gap:40px} } /* -------------------------------------------------------------------------- Hero — the plan sheet -------------------------------------------------------------------------- */ .hero{display:flex;flex-direction:column;align-items:center; padding:72px 24px 88px;background:var(--c-porcelain)} .hero-grid{width:100%;max-width:1140px;display:grid;grid-template-columns:11fr 9fr; gap:56px;align-items:center} .hero-copy{display:flex;flex-direction:column;gap:22px} .hero-eyebrow{display:flex;align-items:center;gap:14px} @media (max-width:919px){ .hero{padding:48px 20px 64px} .hero-grid{grid-template-columns:1fr;gap:44px} } @media (max-width:659px){ .hero-eyebrow{flex-wrap:wrap;row-gap:8px} .hero-eyebrow .crule{order:3;flex-basis:100%} } /* The figure sheet: white, grid-ruled, registration-cornered */ .fig-sheet{position:relative;background:var(--c-white);border:1px solid var(--c-lineStrong); padding:22px;display:flex;flex-direction:column;gap:14px} .fig-sheet::before{content:"";position:absolute;inset:5px;border:1px solid var(--c-line); pointer-events:none} .fig-canvas{position:relative;background-color:var(--c-white); background-image: linear-gradient(var(--c-line) 1px,transparent 1px), linear-gradient(90deg,var(--c-line) 1px,transparent 1px); background-size:26px 26px;border:1px solid var(--c-line)} .fig-canvas svg{width:100%;height:auto} .fig-caption{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .fig-legend{display:flex;flex-direction:column;gap:8px} .fig-legend li{display:flex;gap:10px;align-items:baseline;font-size:13px;line-height:1.5; color:var(--c-muted)} .fig-legend .idx{font-family:var(--f-mono);font-weight:600;font-size:11px;color:var(--c-annot); border:1px solid var(--c-annotLine);width:20px;height:20px;flex-shrink:0;display:inline-flex; align-items:center;justify-content:center;transform:translateY(4px)} /* -------------------------------------------------------------------------- Instrument readouts — credentials strip -------------------------------------------------------------------------- */ .readout-strip{width:100%;max-width:1140px;display:grid; grid-template-columns:repeat(5,1fr);gap:14px} .readout{display:flex;flex-direction:column;gap:6px;padding:20px 18px;background-color:var(--c-white)} .readout .t-measure{color:var(--c-muted)} @media (max-width:1099px){.readout-strip{grid-template-columns:repeat(3,1fr)}} @media (max-width:659px){ .readout-strip{grid-template-columns:repeat(2,1fr);gap:10px} .readout{padding:16px 14px} } /* -------------------------------------------------------------------------- Procedure index — FIG. cards -------------------------------------------------------------------------- */ .fig-card{display:flex;flex-direction:column;gap:12px;padding:24px;background:var(--c-white); border:1px solid var(--c-line);border-radius:var(--r-card);min-height:100%; transition:border-color 150ms ease} .fig-card:hover{border-color:var(--c-teal)} .fig-card .head{display:flex;align-items:baseline;justify-content:space-between;gap:10px} .rule-mini{position:relative;height:7px} .rule-mini::before{content:"";position:absolute;inset:0; background-image:repeating-linear-gradient(90deg,var(--c-line) 0 1px,transparent 1px 8px); background-size:100% 60%;background-position:left bottom;background-repeat:no-repeat} .rule-mini::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px; background:var(--c-line)} .fig-card .foot{display:flex;align-items:center;justify-content:space-between;gap:10px; margin-top:auto;padding-top:6px} .fig-card .from{display:flex;flex-direction:column;gap:2px} /* -------------------------------------------------------------------------- THE QUOTE SHEET — itemized cost plan with dimension chain + title block -------------------------------------------------------------------------- */ .sheet{position:relative;width:100%;background:var(--c-white); border:1px solid var(--c-lineStrong);padding:clamp(24px,4vw,52px); display:flex;flex-direction:column;gap:36px} .sheet::before{content:"";position:absolute;inset:6px;border:1px solid var(--c-line); pointer-events:none} .sheet > *{position:relative} .sheet-grid{display:grid;grid-template-columns:7fr 5fr;gap:clamp(28px,4vw,56px);align-items:start} @media (max-width:919px){.sheet-grid{grid-template-columns:1fr;gap:32px}} /* Dimension chain: segmented cost bar + tick baseline */ .dim{display:flex;flex-direction:column;gap:0} .dim-bar{display:flex;height:38px;border:1px solid var(--c-lineStrong)} .dim-bar .seg{height:100%} .seg-a{background:var(--c-teal)} .seg-b{background-color:var(--c-tealWash); background-image:repeating-linear-gradient(45deg,rgba(11,85,96,0.5) 0 1px,transparent 1px 7px); border-left:1px solid var(--c-lineStrong)} .seg-c{background-color:var(--c-annotWash); background-image:repeating-linear-gradient(-45deg,rgba(181,128,31,0.55) 0 1px,transparent 1px 7px); border-left:1px solid var(--c-lineStrong)} .dim-scale{position:relative;height:9px} .dim-scale::before{content:"";position:absolute;inset:0; background-image: repeating-linear-gradient(90deg,var(--c-lineStrong) 0 1px,transparent 1px 40px), repeating-linear-gradient(90deg,var(--c-line) 0 1px,transparent 1px 8px); background-size:100% 100%,100% 55%;background-position:left top,left top;background-repeat:no-repeat} /* Quote rows: swatch key · label · dotted leader · amount */ .qrows{display:flex;flex-direction:column} .qrow{display:flex;align-items:baseline;gap:12px;padding:13px 2px;border-top:1px solid var(--c-line)} .qrow:first-child{border-top:none;margin-top:10px} .qrow .key{width:14px;height:14px;flex-shrink:0;align-self:center;border:1px solid var(--c-lineStrong)} .qrow .key.a{background:var(--c-teal);border-color:var(--c-teal)} .qrow .key.b{background-color:var(--c-tealWash); background-image:repeating-linear-gradient(45deg,rgba(11,85,96,0.5) 0 1px,transparent 1px 5px)} .qrow .key.c{background-color:var(--c-annotWash); background-image:repeating-linear-gradient(-45deg,rgba(181,128,31,0.55) 0 1px,transparent 1px 5px)} .qrow-total{display:flex;align-items:baseline;gap:12px;padding:16px 2px 4px; border-top:3px double var(--c-lineStrong);margin-top:2px} .qrow-total .t-readout{color:var(--c-teal)} /* What-the-number-includes checklist */ .inc-list{display:flex;flex-direction:column;gap:11px} .inc-list li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.55; color:var(--c-ink)} .inc-list li svg{flex-shrink:0;margin-top:3px} .policy-note{display:flex;flex-direction:column;gap:8px;padding:18px 20px; background:var(--c-porcelain);border-left:2px solid var(--c-annotLine)} /* Title block — the drawing's identity strip */ .titleblock{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--c-lineStrong)} .titleblock > div{display:flex;flex-direction:column;gap:3px;padding:10px 14px; border-left:1px solid var(--c-line);min-width:0} .titleblock > div:first-child{border-left:none} .tb-k{font-family:var(--f-mono);font-weight:400;font-size:10px;letter-spacing:0.12em; text-transform:uppercase;color:var(--c-muted)} .tb-v{font-family:var(--f-mono);font-weight:600;font-size:12px;color:var(--c-ink); overflow-wrap:anywhere} @media (max-width:659px){ .titleblock{grid-template-columns:repeat(2,minmax(0,1fr))} .titleblock > div:nth-child(3){border-left:none} .titleblock > div:nth-child(n+3){border-top:1px solid var(--c-line)} } /* -------------------------------------------------------------------------- Surgeon feature — credential rule + margin note + team -------------------------------------------------------------------------- */ .cred{display:flex;flex-direction:column;border-left:1px solid var(--c-lineStrong)} .cred li{position:relative;padding:0 0 22px 24px} .cred li:last-child{padding-bottom:0} .cred li::before{content:"";position:absolute;left:0;top:9px;width:12px;height:1px; background:var(--c-lineStrong)} .cred .t-annot{display:block;margin-bottom:3px} .margin-quote{display:flex;flex-direction:column;gap:10px;padding:20px 22px; background:var(--c-porcelain);border-left:2px solid var(--c-annotLine)} .margin-quote blockquote{font-family:var(--f-display);font-weight:500;font-size:20px; line-height:1.4;color:var(--c-ink)} .team{display:grid;grid-template-columns:1fr 1fr;gap:14px} .team-card{display:flex;gap:14px;align-items:center;padding:14px;background:var(--c-white); border:1px solid var(--c-line)} /* Works either way: as a carrying initials, or as an portrait. object-fit keeps the square crop honest whatever you drop in. */ .team-card .mono-tile{width:52px;height:52px;flex-shrink:0;display:flex;align-items:center; justify-content:center;background:var(--c-tintDeep);font-family:var(--f-display); font-weight:600;font-size:18px;color:var(--c-teal)} .team-card img.mono-tile{object-fit:cover;display:block} @media (max-width:659px){.team{grid-template-columns:1fr}} /* Portrait slot — meridian-marked frame. Empty it reads as a labelled placeholder; drop an in and the same meridian + horizon rules register over the face, which is the point: this practice photographs to standardized views. Swap the photograph, keep the rules. */ .portrait-slot{position:relative;aspect-ratio:4/5;margin:0;border:1px solid var(--c-lineStrong); background-color:var(--c-tintDeep);overflow:hidden} .portrait-slot > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .portrait-slot::before{content:"";position:absolute;z-index:1;top:6%;bottom:6%;left:50%;width:1px; background:repeating-linear-gradient(180deg,var(--c-lineStrong) 0 6px,transparent 6px 12px); opacity:.55} .portrait-slot::after{content:"";position:absolute;z-index:1;left:8%;right:8%;top:33%;height:1px; background:var(--c-lineStrong);opacity:.35;box-shadow:0 108px 0 0 var(--c-lineStrong)} .portrait-slot .slot-tag{position:absolute;z-index:2;left:12px;bottom:12px;right:12px} /* Record photograph — the same framed-plate apparatus as .portrait-slot, minus the meridian rules: a plain bordered plate with a mono caption tag. Used for facility and consultation-table frames on the interior pages. */ .record-photo{position:relative;margin:0;aspect-ratio:8/5;overflow:hidden; border:1px solid var(--c-lineStrong);background:var(--c-tintDeep)} .record-photo > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .record-photo figcaption{position:absolute;left:12px;bottom:12px;right:12px} @media (max-width:659px){.record-photo{aspect-ratio:3/2}} /* Slot tag chip (shared by every photo slot) */ .slot-tag{display:inline-flex;align-items:center;gap:8px;width:fit-content;max-width:100%; padding:7px 11px;background:var(--c-white);border:1px solid var(--c-lineStrong); font-family:var(--f-mono);font-weight:600;font-size:10px;letter-spacing:0.1em; text-transform:uppercase;color:var(--c-muted)} .slot-tag .dot{width:6px;height:6px;background:var(--c-annotLine);flex-shrink:0} /* -------------------------------------------------------------------------- Consultation walkthrough — stations along a rule -------------------------------------------------------------------------- */ .stations{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:28px; padding-top:26px} .stations::before{content:"";position:absolute;top:0;left:0;right:0;height:10px; background-image: repeating-linear-gradient(90deg,var(--c-lineStrong) 0 1px,transparent 1px 40px), repeating-linear-gradient(90deg,var(--c-line) 0 1px,transparent 1px 8px); background-size:100% 100%,100% 60%;background-position:left bottom;background-repeat:no-repeat} .stations::after{content:"";position:absolute;top:9px;left:0;right:0;height:1px; background:var(--c-lineStrong)} .station{display:flex;flex-direction:column;gap:9px} .station .flag{display:flex;align-items:center;gap:10px;flex-wrap:wrap} @media (max-width:1019px){.stations{grid-template-columns:repeat(2,1fr);row-gap:36px}} @media (max-width:659px){.stations{grid-template-columns:1fr;row-gap:32px}} /* -------------------------------------------------------------------------- Results — consent-framed plates -------------------------------------------------------------------------- */ .plates{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .plate{display:flex;flex-direction:column;gap:12px;padding:16px;background:var(--c-white); border:1px solid var(--c-line)} .pair{display:grid;grid-template-columns:1fr 1fr;gap:10px} .slot{position:relative;aspect-ratio:4/5;border:1px solid var(--c-line); display:flex;align-items:flex-end;padding:10px} .plate-cap{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap} @media (max-width:919px){.plates{grid-template-columns:1fr;max-width:560px}} /* Consent banner */ .consent{display:flex;gap:14px;align-items:flex-start;padding:18px 20px; background:var(--c-white);border:1px solid var(--c-line);border-left:2px solid var(--c-teal)} .consent svg{flex-shrink:0;margin-top:2px} /* -------------------------------------------------------------------------- Financing -------------------------------------------------------------------------- */ .lenders{display:flex;flex-wrap:wrap;gap:12px} .lender{display:flex;flex-direction:column;gap:4px;padding:14px 20px;min-width:160px; background:var(--c-porcelain);border:1px solid var(--c-line)} .lender .t-bodyStrong{font-family:var(--f-display)} .fin-example{display:flex;flex-direction:column;gap:12px;padding:24px;background-color:var(--c-white)} .fin-math{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap} /* -------------------------------------------------------------------------- Reviews — field notes -------------------------------------------------------------------------- */ .review-card{display:flex;flex-direction:column;gap:12px;padding:24px 26px; background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-card)} .review-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} .review-card .quote{font-size:15.5px;line-height:1.66;color:var(--c-ink)} .review-foot{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;margin-top:auto} /* -------------------------------------------------------------------------- FAQ — native details/summary -------------------------------------------------------------------------- */ .faq{display:flex;flex-direction:column;width:100%} .faq details{border-top:1px solid var(--c-line)} .faq details:last-child{border-bottom:1px solid var(--c-line)} .faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px; min-height:44px;padding:18px 2px;cursor:pointer;list-style:none; font-family:var(--f-display);font-weight:600;font-size:17.5px;line-height:1.35;color:var(--c-ink)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-family:var(--f-mono);font-weight:600;font-size:18px; color:var(--c-teal);line-height:1;width:26px;height:26px;border:1px solid var(--c-line); display:inline-flex;align-items:center;justify-content:center;flex-shrink:0; transition:transform 150ms ease} .faq details[open] summary::after{transform:rotate(45deg)} .faq .faq-a{padding:0 2px 22px;max-width:660px} /* -------------------------------------------------------------------------- CTA band (dark) + info readouts -------------------------------------------------------------------------- */ .cta-grid{display:grid;grid-template-columns:7fr 5fr;gap:56px;align-items:center} .cta-info{display:flex;flex-direction:column;gap:0;padding:26px 28px} .cta-row{display:flex;align-items:baseline;gap:12px;padding:12px 0; border-top:1px solid var(--c-lineOnDark)} .cta-row:first-child{border-top:none;padding-top:0} .cta-row .t-measureLight{min-width:86px} .cta-row a{min-height:auto} @media (max-width:919px){.cta-grid{grid-template-columns:1fr;gap:40px}} /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .site-footer{display:flex;flex-direction:column;align-items:center; padding:64px 24px 28px;background:var(--c-deepFoot)} .footer-inner{width:100%;max-width:1140px;display:flex;flex-direction:column;gap:40px} .footer-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px;align-items:start} .footer-col{display:flex;flex-direction:column;gap:10px} .footer-col a{display:inline-flex;min-height:32px;align-items:center} .site-footer .wordmark-name{color:var(--c-onDark)} .site-footer .wordmark-sub{color:var(--c-onDarkMuted)} .footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px; padding-top:18px;border-top:1px solid var(--c-lineOnDark)} @media (max-width:819px){ .footer-cols{grid-template-columns:1fr;gap:28px} .footer-bottom{flex-direction:column;align-items:flex-start;gap:8px} } /* -------------------------------------------------------------------------- Procedure page — hero, price panel, margin-annotated blocks -------------------------------------------------------------------------- */ .page-hero{display:flex;flex-direction:column;align-items:center; padding:64px 24px 80px;background:var(--c-porcelain)} .page-hero .hero-grid{align-items:start} .price-panel{display:flex;flex-direction:column;gap:0;background-color:var(--c-white); border:1px solid var(--c-lineStrong);padding:28px} .price-panel .qrow:first-child{margin-top:6px} .assess{display:flex;flex-direction:column;gap:12px;padding:24px;background:var(--c-white); border:1px solid var(--c-line)} .assess li{display:flex;gap:12px;align-items:baseline;padding:9px 0; border-top:1px solid var(--c-line);font-size:14.5px;line-height:1.5;color:var(--c-ink)} .assess li:first-of-type{border-top:none} .assess .t-annot{white-space:nowrap} .tech-card{display:flex;flex-direction:column;gap:12px;padding:26px;background:var(--c-white); border:1px solid var(--c-line)} .tech-card .tag-row{display:flex;align-items:center;gap:12px} /* -------------------------------------------------------------------------- Inline-SVG roles — the brand mark + plan figures draw from the same tokens -------------------------------------------------------------------------- */ .mk-frame{fill:none;stroke:var(--c-lineStrong)} .mk-mer{stroke:var(--c-teal);stroke-width:1.8} .mk-ticks{stroke:var(--c-ink);stroke-width:1.2} .mk-dot{fill:var(--c-annotLine)} .sv-ink{fill:none;stroke:var(--c-ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .sv-teal{stroke:var(--c-teal);stroke-width:1.2} .sv-tick{stroke:var(--c-lineStrong);stroke-width:1} .sv-faint{stroke:var(--c-lineStrong);stroke-width:1;opacity:.45} .sv-amberLine{stroke:var(--c-annotLine);stroke-width:1.2} .sv-amberDot{fill:var(--c-annotLine)} .sv-amberBox{fill:var(--c-white);stroke:var(--c-annotLine)} .sv-label{font-family:var(--f-mono);font-size:9.5px;fill:var(--c-muted);letter-spacing:0.06em} .sv-letter{font-family:var(--f-mono);font-weight:600;font-size:11px;fill:var(--c-annot)} .sv-check{fill:none;stroke:var(--c-teal);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .sv-checkDark{fill:none;stroke:var(--c-tealBright);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} /* -------------------------------------------------------------------------- Recovery ruler — the calibrated arc (horizontal ≥1020px, vertical below) -------------------------------------------------------------------------- */ .rt{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;position:relative;padding-top:30px} .rt::before{content:"";position:absolute;top:0;left:0;right:0;height:12px; background-image: repeating-linear-gradient(90deg,var(--c-lineStrong) 0 1px,transparent 1px 44px), repeating-linear-gradient(90deg,var(--c-line) 0 1px,transparent 1px 8.8px); background-size:100% 100%,100% 55%;background-position:left bottom;background-repeat:no-repeat} .rt::after{content:"";position:absolute;top:11px;left:0;right:0;height:1px; background:var(--c-lineStrong)} .rstation{display:flex;flex-direction:column;gap:10px;position:relative} .rstation::before{content:"";position:absolute;top:-30px;left:0;width:1.5px;height:22px; background:var(--c-teal)} .rs-mark{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .rs-week{font-family:var(--f-mono);font-weight:600;font-size:17px;color:var(--c-teal); font-variant-numeric:tabular-nums} .rs-can{display:flex;gap:9px;align-items:flex-start;padding:10px 12px; background:var(--c-porcelain);font-size:13.5px;line-height:1.5;color:var(--c-ink)} .rs-can svg{flex-shrink:0;margin-top:3px} @media (max-width:1019px){ .rt{grid-template-columns:1fr;gap:0;padding-top:0; border-left:1px solid var(--c-lineStrong);padding-left:26px} .rt::before,.rt::after{display:none} .rstation{padding:0 0 34px 0} .rstation:last-child{padding-bottom:0} .rstation::before{top:6px;left:-26px;width:14px;height:1.5px} } /* Mini variant — always vertical, for multi-procedure sheets */ .rt.mini{grid-template-columns:1fr;gap:0;padding-top:0; border-left:1px solid var(--c-lineStrong);padding-left:26px} .rt.mini::before,.rt.mini::after{display:none} .rt.mini .rstation{padding:0 0 22px 0} .rt.mini .rstation:last-child{padding-bottom:0} .rt.mini .rstation::before{top:6px;left:-26px;width:14px;height:1.5px} /* -------------------------------------------------------------------------- Prose + read-me (legal pages, buyer setup page) -------------------------------------------------------------------------- */ .prose{display:flex;flex-direction:column;gap:18px;max-width:780px} .prose h2{font-family:var(--f-display);font-weight:600;font-size:23px;color:var(--c-ink);padding-top:10px} .prose p,.prose li{font-size:15.5px;line-height:1.68;color:var(--c-muted)} .prose ul{list-style:disc;padding-left:22px;display:flex;flex-direction:column;gap:8px} .prose strong{color:var(--c-ink)} .notice{display:flex;flex-direction:column;gap:8px;padding:20px 22px; background:var(--c-tint);border-left:2px solid var(--c-annotLine)} .readme-step{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-top:1px solid var(--c-line)} .readme-step:last-of-type{border-bottom:1px solid var(--c-line)} .readme-step .t-station{margin-top:3px} code{font-family:var(--f-mono);font-size:13px;background:var(--c-tint);border:1px solid var(--c-line); border-radius:2px;padding:1px 6px;color:var(--c-ink);overflow-wrap:anywhere} /* -------------------------------------------------------------------------- Forms (consultation page) — static until wired; see read-me -------------------------------------------------------------------------- */ .form-card{display:flex;flex-direction:column;gap:18px;padding:28px; background-color:var(--c-white);border:1px solid var(--c-lineStrong)} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px} .form-grid .full{grid-column:1 / -1} .field{display:flex;flex-direction:column;gap:7px} .field label{font-family:var(--f-mono);font-weight:600;font-size:11.5px;letter-spacing:0.08em; text-transform:uppercase;color:var(--c-ink)} .field input,.field select{min-height:48px;padding:12px 14px;border:1px solid var(--c-lineStrong); border-radius:var(--r-btn);background-color:var(--c-white);font:inherit;font-size:15.5px; color:var(--c-ink);width:100%} .field input::placeholder{color:var(--c-muted)} .field input:focus-visible,.field select:focus-visible{ outline:2.5px solid var(--c-teal);outline-offset:1px;border-color:var(--c-teal)} .checkline{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.55;color:var(--c-muted)} .checkline input{width:17px;height:17px;margin-top:2px;accent-color:var(--c-teal);flex-shrink:0} @media (max-width:659px){.form-grid{grid-template-columns:1fr}}