/* classic-fonts.css */ /* Generated by tools/fonts.py (CLASSIC_FACES). Do not edit by hand: change them there and re-run. The Home classic look only: bundled into assets/classic..css, never into site.css. Latin subsets of SIL OFL 1.1 fonts, licences in assets/fonts/LICENSES/. Faces: archivo-black (400, static), space-grotesk (wght 500-700), poppins-900 (static). No font-synthesis rule here: classic.css allows a thickened Archivo Black where the design asks. */ /* Web fonts */ @font-face{ font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap; src:url(/assets/fonts/archivo-black.3cf3dc78.woff2) format('woff2'); } @font-face{ font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap; src:url(/assets/fonts/space-grotesk.70ac09fa.woff2) format('woff2'); } @font-face{ font-family:'Poppins';font-style:normal;font-weight:900;font-display:swap; src:url(/assets/fonts/poppins-900.8e21848a.woff2) format('woff2'); } /* Metric-matched system fallbacks: used for the first paint, before the web font arrives, so the swap moves almost nothing (CLS). Numbers are measured from each font's tables against the system face. */ @font-face{ font-family:'Archivo Black Fallback';font-style:normal;font-weight:400; src:local('Arial Black'),local('Arial-Black'); size-adjust:99.99%;ascent-override:87.81%;descent-override:21.00%;line-gap-override:0.00%; } @font-face{ font-family:'Space Grotesk Fallback';font-style:normal;font-weight:500 700; src:local('Arial Bold'),local('Arial-BoldMT'); size-adjust:102.59%;ascent-override:95.92%;descent-override:28.46%;line-gap-override:0.00%; } @font-face{ font-family:'Poppins Fallback';font-style:normal;font-weight:900; src:local('Arial Black'),local('Arial-Black'); size-adjust:94.33%;ascent-override:111.31%;descent-override:37.10%;line-gap-override:10.60%; } /* classic.css */ /* The classic look (Home, `look: classic` in content/pages/home.md; Oct 20 2026; every page since site.md `look: classic`, the same day). Alok: bring Home back closer to the 2024 site's colour, layout and theme feel, then the whole site in that colour, type and feel. This brings back the LOOK only: every word still comes from content/. Measured spec: docs/original-home-spec.md. Bundled with classic-fonts.css and classic-pages.css into assets/classic..css and linked after site.css by pages with the look, so nothing here reaches a page without it. Every rule hangs off html[data-look="classic"]. This file is Home's look plus the shared pieces (tokens, base type, buttons, header, tiles, promises, footer); inner pages build on it in classic-pages.css, whose rules never reach Home. Keep Home pixel-identical: correct a shared rule for the inner pages there, not here. What makes it work: pure black type on white and light-grey bands, one hot yellow; Archivo Black in caps at one big size; solid black rectangular buttons in Poppins Black caps that flip to gold; a yellow sticker logo and gold caps nav with a hard shadow over a dark blur strip; frosted glass over the moving footage; hand-drawn wavy dividers; photos cut to perfect circles. */ /* ---------------------------------------------------------------- tokens */ :root[data-look="classic"]{ --c-ink:#000; --c-paper:#fff; --c-mist:#f5f5f5; --c-rule:#d9d9d9; --c-slate:#797979; --c-header:#2b2927; --c-gold:#ffd700; --c-badge:#ffd300; --c-badge-ring:#ff7d14; --cl-display:'Archivo Black','Archivo Black Fallback','Arial Black',Impact,sans-serif; /* 400 only */ --cl-body:'Space Grotesk','Space Grotesk Fallback',system-ui,sans-serif; /* 500 to 700 */ --cl-button:'Poppins','Poppins Fallback','Arial Black',sans-serif; /* 900 only */ --cl-h2:clamp(2.14rem,1.35vw + 1.66rem,2.89rem); /* 34.2 to 46.2 */ --cl-h3:clamp(1.76rem,.9vw + 1.43rem,2.26rem); /* 28.2 to 36.2 */ --cl-h4:clamp(1.38rem,.45vw + 1.21rem,1.63rem); /* 22.1 to 26.1 */ --cl-quote:clamp(2.27rem,1.5vw + 1.69rem,3.1rem); /* 36.3 to 49.6 */ --cl-large:clamp(1.25rem,.3vw + 1.14rem,1.42rem); /* 20 to 22.7 */ --cl-btn:clamp(1.316rem,.318vw + 1.239rem,1.525rem); /* 21 to 24.4, the 2024 button text */ --cl-nav-shadow:2px 2px 0 #000,3px 3px 0 rgba(0,0,0,.2); --cl-wide:min(1102px,100%); --cl-glass:.4; /* the hero panel's tint over its blur: measured over the poster and 16 loop frames, every hero line passes its contrast need */ --cl-header-solid:84px; /* the header once the page scrolls */ --wave-h:8.055vw; /* the 1440 x 116 wave box, at any width */ /* the shared tokens, re-pointed */ --bg:#fff; --bg-warm:#f5f5f5; --surface:#fff; --bg-deep:#2b2927; --text:#000; --text-muted:#4a4a4a; --rule:rgba(0,0,0,.14); --rule-strong:rgba(0,0,0,.3); --field-border:#000; --accent-ink:#000; --accent-on-deep:#ffd700; --btn-bg:#000; --btn-ink:#fff; --btn-bg-dark:#000; --btn-ink-dark:#fff; --serif:var(--cl-body); --sans:var(--cl-body); --display:var(--cl-display); --display-weight:800; --hero-size:clamp(2.2rem,1.2rem + 3.4vw,4rem); --hero-lh:1.2; --hero-track:-.01em; --hero-measure:none; --hero-eyebrow-weight:700; --hero-eyebrow-track:.12em; --hero-sub-font:var(--cl-body); --hero-sub-size:var(--cl-large); --hero-sub-lh:1.5; --pad-x:4vw; --frame-max:1440px; --frame-wide:1440px; --space-section:clamp(4.5rem,2.5rem + 6vw,8.5rem); --header-h:178px; /* the 2024 strip: a 141 px sticker in 178 px */ scroll-padding-top:calc(var(--cl-header-solid) + 16px); } @media (min-width:768px) and (max-width:1099.98px){ :root[data-look="classic"]{ --header-h:150px; } } @media (min-width:768px) and (max-height:820px){ :root[data-look="classic"]{ --header-h:140px; } } @media (max-width:767.98px){ :root[data-look="classic"]{ --pad-x:6vw; --header-h:117px; --cl-header-solid:68px; --cl-glass:.46; } } @media (max-width:767.98px) and (max-height:700px){ :root[data-look="classic"]{ --header-h:92px; } } @media (max-height:500px){ :root[data-look="classic"]{ --header-h:64px; --cl-header-solid:56px; } } /* ---------------------------------------------------------------- base type */ [data-look="classic"] body{background:var(--c-mist);color:#000;font-family:var(--cl-body);font-weight:600;line-height:1.5;letter-spacing:0} [data-look="classic"] strong,[data-look="classic"] b{font-weight:700} [data-look="classic"] main h2,[data-look="classic"] main h3,[data-look="classic"] main h4{font-family:var(--cl-display);font-weight:400; text-transform:uppercase;letter-spacing:-.02em;color:#000} [data-look="classic"] main h2{font-size:var(--cl-h2);line-height:1.1136} [data-look="classic"] main h3{font-size:var(--cl-h4);line-height:1.1712} [data-look="classic"] .section__title{max-width:none;margin-bottom:clamp(32px,4vw,56px)} [data-look="classic"] .prose{max-width:none} [data-look="classic"] .prose a,[data-look="classic"] a.link{text-underline-offset:.2em} [data-look="classic"] .sublead{color:#000;font-size:var(--cl-large);line-height:1.5;margin-top:calc(-1 * clamp(16px,2vw,32px));margin-bottom:clamp(32px,4vw,52px)} [data-look="classic"] .eyebrow{font-family:var(--cl-display);font-weight:400;letter-spacing:0;color:#000;font-size:1rem} [data-look="classic"] .section{padding-block:var(--space-section)} [data-look="classic"] .todo::before{color:#000} [data-look="classic"] .hero .todo::before, [data-look="classic"] .more a .todo::before,[data-look="classic"] .btn .todo::before{color:var(--c-gold)} [data-look="classic"] .founder__photo--pending .todo::before{color:#000} /* ---------------------------------------------------------------- buttons: hard black blocks, gold on hover */ [data-look="classic"] .btn, [data-look="classic"] .founder .more a,[data-look="classic"] #work .more a,[data-look="classic"] .how .more a, [data-look="classic"] .promises .more a,[data-look="classic"] .price-band__link a{ display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:0;padding:1.2rem 2.2rem; font-family:var(--cl-button);font-size:var(--cl-btn);font-weight:900;line-height:1.5;letter-spacing:.05em;text-transform:uppercase; text-decoration:none;white-space:nowrap;text-align:center; background:#000;color:#fff;border:2px solid #000;border-radius:4px;box-shadow:none; transition:background-color .2s ease-in-out,color .2s ease-in-out,border-color .2s ease-in-out} [data-look="classic"] .btn:hover,[data-look="classic"] .btn:active, [data-look="classic"] .btn--primary:hover,[data-look="classic"] .btn--primary.btn--on-dark:hover, [data-look="classic"] .founder .more a:hover,[data-look="classic"] #work .more a:hover,[data-look="classic"] .how .more a:hover, [data-look="classic"] .promises .more a:hover,[data-look="classic"] .price-band__link a:hover{background:var(--c-gold);color:#000;border-color:var(--c-gold)} /* the 2024 site had no outline buttons: the second hero button is a black block too */ [data-look="classic"] .btn--ghost.btn--on-dark{background:#000;color:#fff;border-color:#000} [data-look="classic"] .btn--ghost.btn--on-dark:hover{background:var(--c-gold);color:#000;border-color:var(--c-gold)} [data-look="classic"] .btn[disabled]{opacity:.45} /* Send stays a solid black block until the spam check passes; only its label dims */ [data-look="classic"] .close__form .form__submit[disabled],[data-look="classic"] .close__form .form__submit[disabled]:hover{ opacity:1;background:#000;border-color:#000;color:rgba(255,255,255,.55);cursor:not-allowed} [data-look="classic"] .more{margin-top:clamp(40px,5vw,66px);text-align:center;font-size:1rem} @media (max-width:767.98px){ [data-look="classic"] .btn, [data-look="classic"] .founder .more a,[data-look="classic"] #work .more a,[data-look="classic"] .how .more a, [data-look="classic"] .promises .more a,[data-look="classic"] .price-band__link a{white-space:normal;max-width:100%;padding:1.2rem 2.2rem} } /* ---------------------------------------------------------------- header: sticker logo, gold caps nav, blur strip */ /* The strip (dark warm gradient over a 37px blur, hard edge at the bottom) is drawn by ::before, not by the header itself: a backdrop-filter on the header would become the containing block of the fixed phone menu sheet. */ [data-look="classic"] .site-header,[data-look="classic"] .site-header.is-solid,html[data-look="classic"].menu-open .site-header{ height:var(--header-h);background:none;border-bottom:0;color:#fff;transition:height .25s ease} [data-look="classic"] .site-header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(180deg,var(--c-header) 0,rgba(43,41,39,.55) 55%,rgba(43,41,39,0) 100%); -webkit-backdrop-filter:blur(37px);backdrop-filter:blur(37px);transition:background-color .25s ease} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ [data-look="classic"] .site-header::before{background:linear-gradient(180deg,var(--c-header) 0,rgba(43,41,39,.55) 100%)} } [data-look="classic"] .site-header.is-solid{height:var(--cl-header-solid)} [data-look="classic"] .site-header.is-solid::before{background:rgba(43,41,39,.96);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)} html[data-look="classic"].menu-open .site-header::before{background:#111;-webkit-backdrop-filter:none;backdrop-filter:none} [data-look="classic"] .site-header__bar{gap:clamp(24px,5vw,85px);justify-content:flex-start} /* The wordmark as the 2024 round sticker, redrawn for "Cincinnati Social... A Media Company" (Oct 22, HQ d35/d36; the old art spells the legal name): a flat yellow disc, a fine ticked rim, a thin orange ring, an orange arc over the top, an outline triangle above the name and a solid one below it, and the tagline A MEDIA COMPANY round the bottom. The art is one SVG background drawn by tools/badge.py (`python3 tools/badge.py css` rewrites the url below; never edit it by hand). The name stays live text from content/site.md (the logo link's accessible name), bold caps on two lines, sized from the badge: --badge is the diameter, the type is .106 of it (badge.py NAME_EM, NAME_LH, NAME_TRACK must match font-size, line-height and letter-spacing here). */ [data-look="classic"] .site-header .wordmark{--badge:141px;position:relative;flex:none;width:var(--badge);height:var(--badge);min-height:0;padding:0 calc(var(--badge) * .125);border-radius:50%; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;text-align:center; font-family:var(--cl-body);font-size:calc(var(--badge) * .106);font-weight:700;line-height:1.18;letter-spacing:.03em;text-transform:uppercase;color:#000; background:var(--c-badge) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23ffd300'/%3E%3Ccircle cx='50' cy='50' r='47' fill='none' stroke='%23000' stroke-width='2.6' stroke-dasharray='0.62 1.9934'/%3E%3Ccircle cx='50' cy='50' r='43.5' fill='none' stroke='%23ff7d14' stroke-width='1.5'/%3E%3Cpath d='M20.82 35.13A32.75 32.75 0 0 1 79.18 35.13' fill='none' stroke='%23ff7d14' stroke-width='1.5'/%3E%3Cpath d='M45.6 22.6h8.8L50 29.8z' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M45.6 75.4h8.8L50 68.2z'/%3E%3Cpath d='M15.16 68.11 20.52 66.56 21.43 68.09 17.52 72.08 16.99 71.17 17.86 70.31 16.87 68.66 15.7 69.02ZM17.8 68.38 18.54 69.63 20.46 67.71 20.39 67.6ZM20.56 76.05 24.33 72.18 25.69 73.5 23.07 77.52 23.17 77.62 27.12 74.9 28.48 76.22 24.71 80.09 24 79.4 27.25 76.07 27.15 75.97 23.24 78.66 22.03 77.48 24.62 73.5 24.52 73.41 21.27 76.74ZM26.63 81.51 29.66 77.05 32.53 79 32.01 79.76 29.98 78.38 29.26 79.45 31.11 80.71 30.59 81.47 28.74 80.21 27.99 81.32 30.06 82.72 29.54 83.49ZM31.18 84.46 31.56 83.65 32.2 83.95 33.75 80.69 33.11 80.39 33.5 79.58 35.5 80.53Q36.49 81 36.76 81.74Q37.04 82.48 36.57 83.47L36.13 84.39Q35.67 85.37 34.92 85.62Q34.17 85.88 33.19 85.41ZM33.14 84.36 33.6 84.58Q34.16 84.85 34.55 84.68Q34.95 84.51 35.2 83.98L35.66 83Q35.92 82.46 35.8 82.05Q35.68 81.64 35.12 81.38L34.66 81.16ZM37.15 87.04 38.85 81.91 39.82 82.23 38.12 87.36ZM39.88 87.94 42.36 82.94 44.09 83.29 44.4 88.87 43.38 88.66 43.33 87.43 41.44 87.05 40.91 88.15ZM41.86 86.17 43.28 86.46 43.17 83.76 43.03 83.73ZM51.37 89.28Q50.37 89.32 49.76 88.78Q49.16 88.24 49.13 87.2L49.08 85.9Q49.05 84.86 49.62 84.28Q50.18 83.7 51.19 83.67Q52.18 83.64 52.74 84.16Q53.3 84.69 53.34 85.64L53.34 85.68L52.33 85.72L52.33 85.64Q52.32 85.16 52.04 84.86Q51.76 84.56 51.22 84.58Q50.68 84.6 50.38 84.94Q50.08 85.28 50.1 85.85L50.14 87.18Q50.16 87.74 50.48 88.07Q50.8 88.39 51.34 88.37Q51.89 88.36 52.14 88.04Q52.4 87.71 52.38 87.24L52.38 87.11L53.38 87.07L53.39 87.18Q53.42 88.13 52.89 88.69Q52.37 89.25 51.37 89.28ZM57.68 88.55Q56.68 88.75 55.98 88.32Q55.28 87.89 55.08 86.87L54.83 85.59Q54.62 84.57 55.1 83.91Q55.59 83.24 56.58 83.04Q57.58 82.84 58.28 83.27Q58.98 83.71 59.18 84.73L59.44 86Q59.64 87.02 59.16 87.69Q58.68 88.35 57.68 88.55ZM57.5 87.66Q58.06 87.55 58.31 87.16Q58.55 86.77 58.45 86.23L58.18 84.9Q58.07 84.35 57.7 84.09Q57.32 83.82 56.76 83.94Q56.21 84.05 55.96 84.43Q55.71 84.82 55.82 85.37L56.09 86.7Q56.19 87.24 56.57 87.5Q56.95 87.77 57.5 87.66ZM62.06 87.41 60.03 82.41 61.78 81.7 64.42 85.7 64.55 85.65 63.64 80.94 65.39 80.23 67.42 85.23 66.51 85.61 64.76 81.3 64.63 81.35 65.52 86.01 63.96 86.64 61.36 82.68 61.23 82.73 62.98 87.04ZM69.51 84.05 66.61 79.49 68.49 78.3Q68.92 78.02 69.36 77.99Q69.8 77.95 70.18 78.15Q70.56 78.34 70.84 78.77L70.9 78.86Q71.16 79.28 71.17 79.72Q71.18 80.16 70.96 80.54Q70.74 80.92 70.33 81.19L69.31 81.83L70.37 83.5ZM68.82 81.05 69.75 80.46Q70.05 80.27 70.13 79.98Q70.21 79.69 70.03 79.39L69.99 79.33Q69.8 79.04 69.5 78.99Q69.21 78.94 68.9 79.13L67.97 79.72ZM73.82 81.22 71.37 76.2 72.72 75.04 77.32 78.21 76.52 78.89 75.52 78.18 74.06 79.44 74.62 80.53ZM73.63 78.57 74.73 77.63 72.52 76.06 72.41 76.15ZM78.69 76.79 74.56 73.32 75.8 71.83 80.1 74.04 80.19 73.93 76.58 70.91 77.23 70.14 81.36 73.61 80.12 75.09 75.82 72.89 75.73 73 79.34 76.02ZM83.42 70.5 81.82 69.55 77.84 69.31 78.42 68.34 80.99 68.54 81.06 68.42 79.66 66.26 80.24 65.28 82.34 68.67 83.94 69.62Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; box-shadow:none;transition:width .25s ease,height .25s ease,font-size .25s ease} [data-look="classic"] .site-header .wordmark::before,[data-look="classic"] .site-header .wordmark::after{content:none} [data-look="classic"] .site-header.is-solid .wordmark{--badge:68px} /* logo_style: badge (preview only): the 2024 badge image, at the sticker's sizes */ [data-look="classic"] .site-header .wordmark--badge{padding:0;background:none;box-shadow:none;gap:0} [data-look="classic"] .wordmark--badge picture,[data-look="classic"] .wordmark__badge{width:100%;height:100%} [data-look="classic"] .nav{flex:1;justify-content:space-between;gap:24px} [data-look="classic"] .nav__list{gap:.3vw;flex-wrap:wrap} [data-look="classic"] .nav__link{min-height:44px;padding:8px 15px;border:0;border-radius:4px; font-family:var(--cl-body);font-size:1.2rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase; color:var(--c-gold);text-shadow:var(--cl-nav-shadow);transition:color .2s ease-in-out,background-color .2s ease-in-out,transform .2s ease-in-out} [data-look="classic"] .site-header .nav__link:hover{color:#000;background:var(--c-gold);text-shadow:none;transform:translateY(2px)} [data-look="classic"] .site-header .nav__link[aria-current]{border-bottom:2px solid var(--c-gold);border-radius:0} /* gold is for the nav, the sticker and hover only: the header button is a black block like the rest */ [data-look="classic"] .site-header .nav__cta,[data-look="classic"] .site-header--over-hero:not(.is-solid) .nav__cta{ padding:.7rem 1.3rem;font-size:1rem;background:#000;color:#fff;border-color:#000} [data-look="classic"] .site-header .nav__cta:hover,[data-look="classic"] .site-header--over-hero:not(.is-solid) .nav__cta:hover{background:var(--c-gold);color:#000;border-color:var(--c-gold)} /* keyboard focus over the dark strip and the dark menu sheet: gold, not the page's black */ [data-look="classic"] .site-header :focus-visible{outline-color:var(--c-gold)} [data-look="classic"] .menu-toggle,[data-look="classic"] .menu-link{margin-left:auto;padding:0 8px;font-family:var(--cl-body);font-size:1.1rem;font-weight:700; letter-spacing:.05em;text-transform:uppercase;color:var(--c-gold);text-shadow:var(--cl-nav-shadow)} /* The sheet stays near-black: the 2024 overlay was #f5f5f5 with the same gold caps, but gold on that grey is about 1.4:1 with only the hard shadow as an edge (fidelity finding F11, kept dark on purpose). */ [data-look="classic"] .menu{background:#111;color:#fff;padding-top:24px} [data-look="classic"] .menu__list li + li{border-top:1px solid rgba(255,255,255,.14)} [data-look="classic"] .menu__link{font-family:var(--cl-body);font-size:1.6rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase; color:var(--c-gold);text-shadow:var(--cl-nav-shadow)} [data-look="classic"] .menu__link[aria-current]{text-decoration-color:var(--c-gold)} [data-look="classic"] .menu__cta .btn{background:#000;color:#fff;border-color:rgba(255,255,255,.4)} [data-look="classic"] .menu__cta .btn:hover{background:var(--c-gold);color:#000;border-color:var(--c-gold)} [data-look="classic"] .menu__email{color:#fff;font-size:1.0625rem} [data-look="classic"] .menu__email a{color:#fff} @media (min-width:768px) and (max-width:1099.98px){ [data-look="classic"] .site-header .wordmark{--badge:120px} [data-look="classic"] .nav__link{font-size:.95rem;padding:8px 9px} [data-look="classic"] .site-header .nav__cta,[data-look="classic"] .site-header--over-hero:not(.is-solid) .nav__cta{padding:.6rem 1rem;font-size:.9375rem} } @media (min-width:768px) and (max-height:820px){ [data-look="classic"] .site-header .wordmark{--badge:112px} } @media (max-width:767.98px){ [data-look="classic"] .site-header .wordmark{--badge:80px} [data-look="classic"] .site-header.is-solid .wordmark{--badge:54px} } @media (max-width:767.98px) and (max-height:700px){ [data-look="classic"] .site-header .wordmark{--badge:68px} } /* landscape phones and other short screens: a slim strip, so the hero and both buttons fit */ @media (max-height:500px){ [data-look="classic"] .site-header .wordmark,[data-look="classic"] .site-header.is-solid .wordmark{--badge:52px} } /* ---------------------------------------------------------------- hero: the loop, a frosted strip at the fold, black buttons */ /* As in 2024 the top of the first screen is open footage and the frosted panel sits low, its text close to its top edge. Unlike 2024 (pure blur, no tint) the panel carries a dark tint: over the bright drone sky white type needs it (--cl-glass, measured over the poster and 16 frames of the loop at 360 to 1440). */ [data-look="classic"] .hero{min-height:max(640px,100svh);align-items:end;background:var(--c-slate)} [data-look="classic"] .hero__scrim{background:none} [data-look="classic"] .hero__inner{display:grid;justify-items:center;align-content:end;text-align:center;max-width:none; padding:calc(var(--header-h) + 24px) var(--pad-x) calc(clamp(32px,5vh,56px) + env(safe-area-inset-bottom))} [data-look="classic"] .hero__panel{width:var(--cl-wide);max-width:none;padding:clamp(10px,1vw,14px) clamp(16px,2.2vw,32px) clamp(24px,2.7vw,38px); border-radius:5px;background:rgba(24,22,20,var(--cl-glass));-webkit-backdrop-filter:blur(53px);backdrop-filter:blur(53px)} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){[data-look="classic"] .hero__panel{background:rgba(24,22,20,.62)}} /* the eyebrow is white: small gold caps over the moving sky read only through their hard shadow (and gold was the nav's, the sticker's and hover's in 2024) */ [data-look="classic"] .hero__eyebrow{display:block;margin:clamp(6px,.8vw,10px) 0 clamp(10px,1.2vw,16px);font-family:var(--cl-body);font-size:clamp(.8125rem,.25vw + .75rem,1rem); font-weight:700;letter-spacing:.12em;color:#fff;text-shadow:none} [data-look="classic"] .hero__statement{max-width:none;font-family:var(--cl-display);font-weight:800;font-synthesis:weight style;color:#fff; text-shadow:none;text-wrap:balance} [data-look="classic"] .hero__statement em{font-style:italic;color:var(--c-gold);margin-left:0} [data-look="classic"] .hero__sub{max-width:46rem;margin:clamp(14px,1.6vw,22px) auto 0;font-family:var(--cl-body);font-weight:600;color:#f5f5f5; text-shadow:none} [data-look="classic"] .hero__actions{justify-content:center;gap:16px;margin-top:clamp(20px,4vh,44px)} [data-look="classic"] .hero__toggle{border:0;border-radius:50%;background:rgba(0,0,0,.7)} @media (max-width:767.98px){ /* the pause button sits bottom right: the buttons end above it */ [data-look="classic"] .hero__inner{padding-bottom:calc(76px + env(safe-area-inset-bottom))} [data-look="classic"] .hero__panel{width:100%} [data-look="classic"] .hero__actions{flex-direction:column;align-items:center;gap:12px} [data-look="classic"] .hero__actions .btn{flex:none;width:100%;max-width:22rem} [data-look="classic"] .hero__statement{line-height:1.2} } /* small and short phones (320 x 640, 360 x 640): tighter type and buttons so both buttons stay on the first screen */ @media (max-width:767.98px) and (max-height:700px){ [data-look="classic"] .hero{min-height:max(560px,100svh)} [data-look="classic"] .hero__inner{padding-top:calc(var(--header-h) + 12px);padding-bottom:calc(68px + env(safe-area-inset-bottom))} [data-look="classic"] .hero__statement{font-size:clamp(1.75rem,1rem + 3.4vw,2.2rem)} [data-look="classic"] .hero__sub{font-size:1rem;margin-top:10px} [data-look="classic"] .hero__actions{margin-top:16px;gap:10px} [data-look="classic"] .hero__actions .btn{padding:.85rem 1.4rem;font-size:1.125rem} } /* landscape phones: the panel and buttons side by side would not fit; keep the strip slim and the buttons in a row */ @media (max-height:500px) and (min-width:568px){ [data-look="classic"] .hero{min-height:100svh} [data-look="classic"] .hero__inner{padding-top:calc(var(--header-h) + 12px);padding-bottom:calc(20px + env(safe-area-inset-bottom))} [data-look="classic"] .hero__statement{font-size:clamp(1.6rem,1rem + 2.4vw,2.4rem)} [data-look="classic"] .hero__sub{font-size:1rem;margin-top:8px} [data-look="classic"] .hero__actions{flex-direction:row;margin-top:14px} [data-look="classic"] .hero__actions .btn{width:auto;padding:.75rem 1.4rem;font-size:1.0625rem} } /* ---------------------------------------------------------------- quote band: heavy caps on white */ [data-look="classic"] .plate{background:#fff;color:#000;padding-block:clamp(64px,8vw,128px)} /* the quote and the names read as one white pause */ [data-look="classic"] .plate:has(+ .names){padding-bottom:clamp(40px,4vw,64px)} [data-look="classic"] .plate__figure{text-align:center} [data-look="classic"] .big{max-width:1244px;margin-inline:auto;font-family:var(--cl-display);font-size:var(--cl-quote);font-style:normal;font-weight:400; line-height:1.1136;letter-spacing:-.02em;text-transform:uppercase;text-wrap:balance} [data-look="classic"] .plate__cite{margin-top:clamp(12px,1.4vw,20px);font-family:var(--cl-body);font-size:var(--cl-large);font-weight:600; letter-spacing:0;text-transform:none;color:#000} [data-look="classic"] .plate__cite cite{display:inline} [data-look="classic"] .plate__cite cite::before{display:none} /* ---------------------------------------------------------------- names: big black marks on white */ /* the marks as the 2024 strip showed them: big and solid black (media/logos at 300 px tall, tools/logos.py) */ [data-look="classic"] .names{background:#fff;padding-block:clamp(16px,2vw,29px) clamp(48px,5vw,80px)} [data-look="classic"] .names .eyebrow{text-align:center;margin-bottom:clamp(28px,3vw,44px)} [data-look="classic"] .logos{justify-content:center;align-items:center;gap:clamp(32px,6vw,120px)} [data-look="classic"] .logos img{height:clamp(96px,10vw,150px);width:auto;max-width:100%;filter:none;mix-blend-mode:multiply;opacity:1} @media (max-width:519.98px){ [data-look="classic"] .logos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-items:center;gap:32px 24px} [data-look="classic"] .logos img{height:auto;max-height:96px;object-fit:contain} } /* ---------------------------------------------------------------- the wavy divider (6px black, one wave per width) */ [data-look="classic"] .founder,[data-look="classic"] .site-footer{position:relative} [data-look="classic"] .founder::before,[data-look="classic"] .site-footer::before{content:"";position:absolute;inset:0 0 auto 0;height:var(--wave-h); background-repeat:no-repeat;background-position:0 0;background-size:100% 100%;pointer-events:none} /* white above, grey below */ [data-look="classic"] .founder::before{background-color:var(--c-mist); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -8 1440 116' preserveAspectRatio='none'%3E%3Cpath d='M0,-8H1440V50C1080,104.67 1080,104.67 720,50C360,-4.67 360,-4.67 0,50Z' fill='%23fff'/%3E%3Cpath d='M0,50C360,-4.67 360,-4.67 720,50S1080,104.67 1440,50' fill='none' stroke='%23000' stroke-width='6' stroke-linecap='square' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")} /* grey on both sides: the line alone */ [data-look="classic"] .site-footer::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -8 1440 116' preserveAspectRatio='none'%3E%3Cpath d='M0,50C360,-4.67 360,-4.67 720,50S1080,104.67 1440,50' fill='none' stroke='%23000' stroke-width='6' stroke-linecap='square' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")} /* ---------------------------------------------------------------- founder: image left, heavy heading right, on grey */ [data-look="classic"] .founder{background:var(--c-mist);padding-top:calc(var(--wave-h) + clamp(48px,6vw,96px))} [data-look="classic"] .founder__grid{align-items:center;gap:clamp(32px,4.6vw,66px)} @media (min-width:768px){ [data-look="classic"] .founder__grid{grid-template-columns:minmax(0,768fr) minmax(0,490fr)} } [data-look="classic"] .founder__photo img{aspect-ratio:3/2;object-fit:cover} /* no photo yet: a quiet grey 3:2 frame with the open question in it (black read as a dead video player) */ [data-look="classic"] .founder__photo--pending{display:grid;place-items:center;aspect-ratio:3/2;padding:clamp(20px,4vw,48px);border:0; background:var(--c-rule);color:#000;text-align:center} [data-look="classic"] .founder__photo--pending .todo{background:transparent;border-color:rgba(0,0,0,.4);color:#000;font-weight:600} [data-look="classic"] .founder__text .section__title{margin-bottom:clamp(20px,2.4vw,32px)} [data-look="classic"] .founder__text .prose{font-size:var(--cl-large);line-height:1.5} [data-look="classic"] .founder .more{text-align:left;margin-top:clamp(28px,3vw,44px)} @media (max-width:767.98px){ [data-look="classic"] .founder__text{order:-1} } /* ---------------------------------------------------------------- work: one big featured film, then the rest */ [data-look="classic"] #work{background:var(--c-mist);padding-top:clamp(40px,5vw,72px)} [data-look="classic"] #work .section__title,[data-look="classic"] #work .sublead{width:min(768px,100%);margin-inline:auto} [data-look="classic"] #work .grid{width:var(--cl-wide);margin-inline:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,4vw,64px) clamp(20px,2vw,32px)} [data-look="classic"] #work .grid > .tile:first-child{grid-column:1 / -1} [data-look="classic"] .tile__media{background:#000} [data-look="classic"] .tile__runtime{border-radius:4px;background:rgba(0,0,0,.7);font-family:var(--cl-body);font-weight:700} [data-look="classic"] .tile__client{margin-top:16px;font-family:var(--cl-display);font-size:1rem;font-weight:400;letter-spacing:0;color:#000} [data-look="classic"] main .tile__title{margin-top:6px;font-size:var(--cl-h4);line-height:1.1712} [data-look="classic"] .tile__line{color:#000;font-weight:600;font-size:var(--cl-large);line-height:1.5} [data-look="classic"] #work .grid > .tile:first-child .tile__title{font-size:var(--cl-h3);line-height:1.1424} [data-look="classic"] #work .grid > .tile:first-child .tile__line{font-size:var(--cl-large)} /* the play badge over every poster (the tile's play button, shown by tile-play.js): the 2024 featured film's black disc and white triangle, 84 px on the featured film and 64 px elsewhere. Without JS the featured film keeps its badge as a picture over the poster (the tile still opens the watch page then). */ [data-look="classic"] .tile__play::before{background-color:rgba(0,0,0,.7)} [data-look="classic"] .tile__play:hover::before{background-color:rgba(0,0,0,.9)} [data-look="classic"] .tile__play:focus-visible,[data-look="classic"] .tile__play:focus-visible::before{outline-color:#fff} [data-look="classic"] .tile__player{background:#000} [data-look="classic"] .tile__close{font-weight:700;font-size:1rem;color:#000} [data-look="classic"] #work .grid > .tile:first-child .tile__play::before{width:84px;height:84px;margin:-42px 0 0 -42px} [data-look="classic"].no-js #work .grid > .tile:first-child .tile__media::after{content:"";position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px; border-radius:50%;background:rgba(0,0,0,.7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l11-6.5z' fill='%23fff'/%3E%3C/svg%3E") 55% 50% / 40% no-repeat; transition:background-color .2s ease-in-out} [data-look="classic"].no-js #work .grid > .tile:first-child:hover .tile__media::after{background-color:rgba(0,0,0,.9)} [data-look="classic"] .tile__link:hover,[data-look="classic"] .tile__link:focus-visible{text-decoration-thickness:2px} @media (max-width:767.98px){ [data-look="classic"] #work .grid{grid-template-columns:minmax(0,1fr)} [data-look="classic"] #work .grid > .tile:first-child .tile__play::before, [data-look="classic"].no-js #work .grid > .tile:first-child .tile__media::after{width:64px;height:64px;margin:-32px 0 0 -32px} [data-look="classic"] .tile__play::before{width:56px;height:56px;margin:-28px 0 0 -28px} } /* ---------------------------------------------------------------- how: three circles, caps titles, centred text */ [data-look="classic"] .how{background:#fff;text-align:center} [data-look="classic"] .how .section__title,[data-look="classic"] .how .sublead{margin-inline:auto;text-wrap:balance} [data-look="classic"] .how .section__title{max-width:22ch} [data-look="classic"] .how__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,40px) 0} [data-look="classic"] .how__item{display:grid;grid-template-rows:auto auto 1fr;justify-items:center;align-content:start} [data-look="classic"] .how__photo{width:min(90%,399px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--c-rule)} [data-look="classic"] .how__photo picture,[data-look="classic"] .how__photo img{width:100%;height:100%;object-fit:cover} [data-look="classic"] .how__photo--pending{display:grid;place-items:center;padding:18%;background:var(--c-mist);border:2px dashed var(--c-rule)} [data-look="classic"] main .how__title{margin-top:clamp(28px,3.4vw,56px);max-width:16ch;text-wrap:balance} [data-look="classic"] .how__body{margin-top:clamp(14px,1.6vw,24px);max-width:30ch;font-size:var(--cl-large);line-height:1.5} /* preview only: a [COPY] marker as one box inside its column (its inline padding pushed past the column edge) */ [data-look="classic"] .how .todo{display:inline-block;max-width:100%;overflow-wrap:anywhere} @media (max-width:767.98px){ [data-look="classic"] .how__list{grid-template-columns:minmax(0,1fr);gap:64px} [data-look="classic"] .how__item{grid-template-rows:none} [data-look="classic"] .how__item > .how__title{order:-1;margin:0 0 24px} [data-look="classic"] .how__photo{width:min(64vw,280px)} } /* ---------------------------------------------------------------- promises: four big statements, sticker numerals */ [data-look="classic"] .promises{background:#fff;text-align:center;padding-top:clamp(24px,3vw,48px)} [data-look="classic"] .promises .section__title{max-width:none} [data-look="classic"] .promises__list{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,48px);border-top:0} [data-look="classic"] .promise{justify-items:center;align-content:start;gap:clamp(18px,2vw,28px);padding:0;border:0} [data-look="classic"] .promise + .promise{padding-left:0;border-left:0} [data-look="classic"] .promise__n{display:grid;place-items:center;width:clamp(64px,6vw,84px);height:clamp(64px,6vw,84px);border-radius:50%; background:radial-gradient(circle closest-side,var(--c-badge) 0 80%,var(--c-badge-ring) 80% 85%,var(--c-badge) 85%);box-shadow:0 0 0 1px rgba(0,0,0,.35),2px 3px 0 rgba(0,0,0,.35); font-family:var(--cl-display);font-size:clamp(1.25rem,1vw + .9rem,1.6rem);font-weight:400;letter-spacing:0;color:#000} [data-look="classic"] .promise__text{max-width:14ch;font-family:var(--cl-display);font-size:var(--cl-h4);font-weight:400;line-height:1.1712;letter-spacing:-.02em; text-transform:uppercase;text-wrap:balance} @media (max-width:1023.98px){ [data-look="classic"] .promises__list{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:56px} } @media (max-width:519.98px){ [data-look="classic"] .promises__list{grid-template-columns:minmax(0,1fr);row-gap:48px} } /* ---------------------------------------------------------------- price band: the two money lines, heavy, on grey */ [data-look="classic"] .band.price-band{background:var(--c-mist);border:0;padding-block:clamp(72px,8vw,128px);text-align:center} [data-look="classic"] .price-band__inner{display:block} [data-look="classic"] .price-band__line{font-family:var(--cl-display);font-weight:400;text-transform:uppercase;letter-spacing:-.02em;line-height:1.12} [data-look="classic"] .price-band__line > span{display:block} [data-look="classic"] .price-band__line > span:first-child{font-size:var(--cl-h2)} [data-look="classic"] .price-band__line > span:last-child{margin-top:clamp(10px,1.4vw,20px);font-size:var(--cl-h4)} [data-look="classic"] .price-band__line > .price-band__sep{display:none} [data-look="classic"] .price-band__link{margin-top:clamp(36px,4vw,56px);font-size:1rem} /* ---------------------------------------------------------------- close: heavy heading, the form inline */ [data-look="classic"] .close--form{background:var(--c-mist);color:#000;text-align:center;padding-top:clamp(24px,3vw,40px);padding-bottom:clamp(48px,6vw,96px)} [data-look="classic"] main .close__heading{max-width:16ch;margin-inline:auto;font-family:var(--cl-display);font-size:var(--hero-size);font-weight:800; font-synthesis:weight;line-height:1.2;letter-spacing:-.01em;text-transform:none;text-wrap:balance} [data-look="classic"] .close--form .close__body{max-width:36rem;margin:clamp(20px,2.4vw,38px) auto 0;color:#000;font-size:1.125rem} [data-look="classic"] .close__note{display:inline-block;margin-top:24px;padding:6px 14px;border-radius:4px;background:var(--c-gold);color:#000;font-size:.9375rem;font-weight:600} [data-look="classic"] .close__note a{color:inherit} [data-look="classic"] .close__form{width:var(--cl-wide);margin:clamp(40px,5vw,72px) auto 0;text-align:left} [data-look="classic"] .close__form .form{max-width:none;display:grid;grid-template-columns:minmax(0,1fr);column-gap:10px} [data-look="classic"] .close__form .form > *{grid-column:1 / -1} @media (min-width:768px){ [data-look="classic"] .close__form .form{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} [data-look="classic"] .close__form .form > [data-field="name"]{grid-column:1} [data-look="classic"] .close__form .form > [data-field="email"]{grid-column:2} } [data-look="classic"] .close__form .field{gap:4px;margin-bottom:20px} [data-look="classic"] .close__form .field__label{font-family:var(--cl-body);font-size:1rem;font-weight:600;color:#000} [data-look="classic"] .close__form .field input,[data-look="classic"] .close__form .field select,[data-look="classic"] .close__form .field textarea{ min-height:44px;padding:8px 18px;border:1px solid #000;border-radius:24px;background-color:transparent; font-family:var(--cl-body);font-size:1rem;font-weight:600;color:#000} [data-look="classic"] .close__form .field .field__select{padding-right:44px} [data-look="classic"] .close__form .field textarea{min-height:120px;padding-top:12px} [data-look="classic"] .close__form .field [aria-invalid="true"]{border-color:var(--error)} [data-look="classic"] .close__form .field-row{column-gap:10px} [data-look="classic"] .close__form .form__check{display:flex;flex-direction:column;align-items:center;text-align:center} [data-look="classic"] .close__form .form__actions{justify-content:center} [data-look="classic"] .close__form .form__submit{min-width:9rem} [data-look="classic"] .close__form .estimate-box{border-radius:12px} [data-look="classic"] .close--form .hello{margin-top:clamp(36px,4vw,56px);font-size:var(--cl-large);font-weight:600} [data-look="classic"] .close--form .hello a{text-underline-offset:.2em} @media (max-width:767.98px){ [data-look="classic"] .close__form .form__submit{width:auto;min-width:12rem} } /* ---------------------------------------------------------------- footer: grey under a wave, the brand in heavy caps */ [data-look="classic"] .site-footer{border-top:0;background:var(--c-mist);color:#000;font-family:var(--cl-body);font-size:1rem;font-weight:600;letter-spacing:0; padding:calc(var(--wave-h) + clamp(40px,6vw,88px)) 0 calc(48px + env(safe-area-inset-bottom))} [data-look="classic"] .site-footer a{color:#000} [data-look="classic"] .site-footer a:hover{text-decoration:underline;text-underline-offset:.2em} [data-look="classic"] .site-footer :focus-visible{outline-color:#000} [data-look="classic"] .site-footer__grid{align-items:start} @media (min-width:768px){ [data-look="classic"] .site-footer__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(40px,6vw,96px)} } [data-look="classic"] .site-footer .wordmark--footer{display:block;min-height:0;font-family:var(--cl-display);font-size:var(--cl-h2);font-weight:400; line-height:1.1136;letter-spacing:-.02em;text-transform:uppercase;color:#000} [data-look="classic"] .site-footer__area{max-width:30ch;margin-top:clamp(16px,2vw,28px);font-size:var(--cl-large);line-height:1.5} [data-look="classic"] .site-footer__email{margin-top:16px;font-size:var(--cl-large)} [data-look="classic"] .site-footer__email a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em} [data-look="classic"] .site-footer__nav ul{display:grid;grid-template-columns:repeat(2,max-content);gap:2px 48px;max-width:none} [data-look="classic"] .site-footer__nav a{font-family:var(--cl-display);font-size:var(--cl-h4);font-weight:400;letter-spacing:-.02em;text-transform:uppercase;line-height:1.1} [data-look="classic"] .site-footer__legal{margin-top:clamp(40px,5vw,72px);padding-top:0;border-top:0;font-size:.9rem;color:#4a4a4a} @media (min-width:768px) and (max-width:899.98px){ [data-look="classic"] .site-footer__nav ul{column-gap:28px} [data-look="classic"] .site-footer__nav a{font-size:1.25rem} } @media (max-width:767.98px){ [data-look="classic"] .site-footer__nav ul{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px} [data-look="classic"] .site-footer__nav a{font-size:1.25rem} } @media (max-width:359.98px){ [data-look="classic"] .site-footer__nav a{font-size:1.125rem} } /* ---------------------------------------------------------------- edit map on the light bands */ html.edit-map[data-look="classic"] .site-footer [data-src],html.edit-map[data-look="classic"] .plate [data-src]{outline-color:#000} /* classic-pages.css */ /* The classic look on every page except Home (Oct 20 2026; Alok: the whole site in the 2024 site's colour, type and theme feel, each page keeping its current layout and sections). Bundled after classic-fonts.css and classic.css into assets/classic..css. classic.css already dresses the shared pieces (tokens, base type, black buttons, the header strip and sticker, tiles, the promises list, the footer); this file adds the inner-page pieces and corrects the few shared rules that were written for Home's layout. Every selector starts with [data-look="classic"] .page:not(.page--home) (or a .page-- under the look), so nothing here can reach Home, and its specificity (0,3,0 and up) beats the classic.css rule it corrects without !important. Words never change here: every label still comes from content/. The system, as on Home: #000 type on #fff and #f5f5f5 bands, one hot yellow (the sticker, the nav, hover, the selected choice); Archivo Black in caps for headings (the H1 mixed case and thickened, as the 2024 inner pages set it); Space Grotesk 600 for text; Poppins Black caps on solid black 4px-radius buttons that turn gold; pill form fields; the wavy black line over the grey footer. Bands alternate white and grey and neighbours of the same colour merge (as in 2024); every page has exactly one wave, over the footer (a closing band that would follow a grey band turns white, so the wave never repeats a few hundred pixels apart). Text is the 2024 16 px. */ /* ---------------------------------------------------------------- page shell: white main, slanted em, band rhythm */ /* text at the 2024 body size (spec 2.2: Space Grotesk 600, 16 px on every width; the plain look's token is 17.5 to 19 px) and selected text in the badge yellow, not the plain look's tan */ [data-look="classic"] .page:not(.page--home){--cl-band:clamp(3.5rem,1.75rem + 4.5vw,6.5rem);--fs-body:1rem;--accent-soft:rgba(255,215,0,.45);font-synthesis:style} [data-look="classic"] .page:not(.page--home) main{background:#fff} [data-look="classic"] .page:not(.page--home) .section{padding-block:var(--cl-band)} [data-look="classic"] .page:not(.page--home) .section--tight{padding-block:var(--space-tight)} /* white after white and grey after grey read as one band: no second top padding */ [data-look="classic"] .page:not(.page--home) :is(.page-head,.section:not(.section--warm,.section--deep,.contact)) + .section:not(.section--warm,.section--deep,.contact), [data-look="classic"] .page:not(.page--home) .section--warm + .section--warm{padding-top:0} /* ---------------------------------------------------------------- header: the tall sticker strip, slim on scroll */ /* Over a white page Home's fade would leave the gold nav on mid grey (about 2.8:1): the strip stays solid dark under the nav (about 10:1) and fades out below it. The menu sheet keeps classic.css's near-black strip. */ [data-look="classic"]:not(.menu-open) .page:not(.page--home) .site-header--tall:not(.is-solid)::before{ background:linear-gradient(180deg,var(--c-header) 0,var(--c-header) 58%,rgba(43,41,39,0) 100%)} /* site.js turns the strip solid once this sentinel (first in
) scrolls under it: after 24 px of scroll, before the H1 (about 33 px below the strip on phones, 58 px on desktop) can slide under the fade and its blur. site.js measures the strip once, at load, so the sentinel never sits above the tallest strip it may have measured (178 px; 117 on portrait phones): a window that turns shorter or narrower (a smaller --header-h) cannot flip the strip solid at the top of the page. Landscape phones keep the 202 px floor (the slim 64 px strip, solid after about 140 px). */ [data-look="classic"] .page:not(.page--home) .header-sentinel--page{position:absolute;top:max(calc(var(--header-h) + 24px),202px);left:0;width:1px;height:1px;margin:0} @media (max-width:767.98px) and (min-height:501px){ [data-look="classic"] .page:not(.page--home) .header-sentinel--page{top:max(calc(var(--header-h) + 24px),141px)} } /* the skip link is a black box over the dark strip: its focus ring in gold, as the header's */ [data-look="classic"] .page:not(.page--home) .skip:focus-visible{outline-color:var(--c-gold)} /* the open menu sheet covers the page: the post reading bar does not run across its top */ [data-look="classic"].menu-open .page:not(.page--home) .progress{display:none} /* ---------------------------------------------------------------- page head: the H1 close under the strip */ [data-look="classic"] .page:not(.page--home) .page-head{padding-top:calc(var(--header-h) + clamp(24px,3vw,48px));padding-bottom:var(--space-tight)} [data-look="classic"] .page:not(.page--home) .preview-ribbon + .page-head{padding-top:clamp(32px,3.4vw,52px)} /* mixed case, browser-thickened Archivo Black, as the 2024 about, FAQ and journal pages set their H1 */ [data-look="classic"] .page:not(.page--home) .page-head__title{font-family:var(--cl-display);font-weight:800;font-synthesis:weight style; font-size:var(--hero-size);line-height:1.2;letter-spacing:-.01em;text-transform:none;color:#000} [data-look="classic"] .page:not(.page--home) .page-head .lead{max-width:var(--measure-lead);margin-top:clamp(18px,2vw,28px); font-size:var(--cl-large);font-weight:600;line-height:1.5;color:#000} [data-look="classic"] .page:not(.page--home) .page-head .reply-promise{max-width:var(--measure-lead);margin-top:clamp(18px,2vw,28px);font-family:var(--cl-body); font-size:var(--cl-large);font-weight:600;line-height:1.5;color:#000} [data-look="classic"] .page:not(.page--home) .post-meta{font-family:var(--cl-body);font-size:.9rem;font-weight:600;color:#4a4a4a} @media (max-width:767.98px){ [data-look="classic"] .page:not(.page--home) .page-head__title{line-height:1.25} } /* ---------------------------------------------------------------- section titles and prose */ [data-look="classic"] .page:not(.page--home) .section__title{max-width:var(--measure-lead);margin-bottom:clamp(28px,3vw,44px)} [data-look="classic"] .page:not(.page--home) .section__title--small{font-size:var(--cl-h4);line-height:1.17} [data-look="classic"] .page:not(.page--home) .prose{max-width:var(--measure-prose)} /* a prose column that is also its own frame (a journal post, the privacy policy): 660 px of text plus the gutters, so it lines up with the heading above it */ [data-look="classic"] .page:not(.page--home) .inner--prose.prose{max-width:calc(var(--measure-prose) + 2 * var(--pad-x))} /* the policy's heading sits at the left of the wide classic frame: its column starts there too, not centred */ [data-look="classic"] .page--privacy .inner--prose.prose{margin-left:max(0px,calc((100% - var(--frame-max)) / 2))} [data-look="classic"] .page:not(.page--home) .prose h2{margin-top:1.4em;font-size:var(--cl-h3);line-height:1.14} [data-look="classic"] .page:not(.page--home) .prose h3{margin-top:1.6em;font-size:var(--cl-h4);line-height:1.17} [data-look="classic"] .page:not(.page--home) .prose h4{margin-top:1.6em;font-family:var(--cl-display);font-size:1.125rem;font-weight:400;line-height:1.3; letter-spacing:-.01em;text-transform:uppercase} [data-look="classic"] .page:not(.page--home) .prose :is(h2,h3,h4) + *{margin-top:.6em} [data-look="classic"] .page:not(.page--home) .prose > :first-child{margin-top:0} [data-look="classic"] .page:not(.page--home) .prose blockquote{padding-left:1.25em;border-left:6px solid #000;font-size:var(--cl-large);font-style:italic;line-height:1.5} [data-look="classic"] .page:not(.page--home) .prose li::marker{color:#000} [data-look="classic"] .page:not(.page--home) .prose a{text-decoration-thickness:1px} [data-look="classic"] .page:not(.page--home) .prose a:hover{text-decoration-thickness:2px} /* long reads: a little more air between the lines */ [data-look="classic"] .page:not(.page--home) :is(.post__body,.page--privacy .prose){line-height:1.6} /* the address never breaks at its hyphen ("alok@cincy-" / "social.com"); it fits the narrowest column at every size used here. Only links that show the address (no ?subject=): a sentence-long mailto link still wraps. */ [data-look="classic"] .page:not(.page--home) main a[href^="mailto:"]:not([href*="?"]){white-space:nowrap} /* lone text links: a tap area about 44 px tall from padding on the inline link (an inline box's padding widens what takes the tap but not the line), so nothing moves; the 404 links share their 10 px gap */ [data-look="classic"] .page:not(.page--home) :is(.day-rate__links a,.cta__email a,.link-list a){padding-block:12px} /* preview-only [COPY] / [CONFIRM] boxes in the look's greys, not the plain look's tan */ [data-look="classic"] .page:not(.page--home) .todo{border-color:rgba(0,0,0,.45);background:rgba(0,0,0,.05);font-weight:600} /* ---------------------------------------------------------------- "more" links and buttons */ [data-look="classic"] .page:not(.page--home) .more{margin-top:clamp(28px,3vw,40px);text-align:start;font-size:1rem} /* three "more" links read as Home's "go there" buttons: thanks to Work, pricing to the FAQ, a post to its page */ [data-look="classic"] .page--pricing #day-rates .more a,[data-look="classic"] .page--thanks .page-head .more a,[data-look="classic"] .page--post .related .more a{ display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:1.2rem 2.2rem; font-family:var(--cl-button);font-size:var(--cl-btn);font-weight:900;line-height:1.5;letter-spacing:.05em;text-transform:uppercase; text-decoration:none;text-align:center;background:#000;color:#fff;border:2px solid #000;border-radius:4px; transition:background-color .2s ease-in-out,color .2s ease-in-out,border-color .2s ease-in-out} [data-look="classic"] .page--pricing #day-rates .more a:hover,[data-look="classic"] .page--thanks .page-head .more a:hover, [data-look="classic"] .page--post .related .more a:hover{background:var(--c-gold);color:#000;border-color:var(--c-gold)} @media (max-width:767.98px){ [data-look="classic"] .page--pricing #day-rates .more a,[data-look="classic"] .page--thanks .page-head .more a,[data-look="classic"] .page--post .related .more a{max-width:100%} } /* small buttons in the page (copy the address, remove the estimate) stay small; the header's is classic.css's */ [data-look="classic"] .page:not(.page--home) main .btn--sm{min-height:44px;padding:.6rem 1.1rem;font-size:1rem} /* Send stays a solid black block until the spam check passes; only its label dims (as Home's close form) */ [data-look="classic"] .page:not(.page--home) .contact__form .form__submit[disabled], [data-look="classic"] .page:not(.page--home) .contact__form .form__submit[disabled]:hover{opacity:1;background:#000;border-color:#000;color:rgba(255,255,255,.55);cursor:not-allowed} /* ---------------------------------------------------------------- the closing band: the 2024 "get in touch", grey */ [data-look="classic"] .page:not(.page--home) .cta{background:var(--c-mist);color:#000;text-align:center} [data-look="classic"] .page:not(.page--home) .cta__heading{max-width:22ch;margin-inline:auto;text-wrap:balance} [data-look="classic"] .page:not(.page--home) .cta__body{max-width:36rem;margin:clamp(16px,2vw,24px) auto 0;color:#000;font-size:var(--cl-large);line-height:1.5} [data-look="classic"] .page:not(.page--home) .cta__actions{margin-top:clamp(28px,3vw,40px)} [data-look="classic"] .page:not(.page--home) .cta__email{margin-top:20px;font-family:var(--cl-body);font-size:var(--cl-large);font-weight:700} [data-look="classic"] .page:not(.page--home) .cta__email a{text-underline-offset:.2em} [data-look="classic"] .page:not(.page--home) .cta :focus-visible{outline-color:#000} [data-look="classic"] .page:not(.page--home) .cta .todo::before{color:#000} html.edit-map[data-look="classic"] .page:not(.page--home) .cta [data-src]{outline-color:#000} /* after a grey band the closing band is the white pause before the footer's one wave (Home's founder wave pattern), instead of grey, wave, grey, wave a few hundred pixels apart */ [data-look="classic"] .page:not(.page--home) .section--warm + .cta{background:#fff} /* no heading in content (the journal and its posts): a button and the address need less air around them */ [data-look="classic"] .page:not(.page--home) .cta:not(:has(.cta__heading)){padding-block:clamp(48px,4vw,64px)} [data-look="classic"] .page:not(.page--home) .cta .inner > .cta__actions:first-child{margin-top:0} /* ---------------------------------------------------------------- footer: white above the wave when the page ends white */ [data-look="classic"] .page:not(.page--home):has(> main > :last-child:not(.section--warm,.cta,.contact)) .site-footer::before, [data-look="classic"] .page:not(.page--home):has(> main > .section--warm + .cta:last-child) .site-footer::before{background-color:var(--c-mist); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -8 1440 116' preserveAspectRatio='none'%3E%3Cpath d='M0,-8H1440V50C1080,104.67 1080,104.67 720,50C360,-4.67 360,-4.67 0,50Z' fill='%23fff'/%3E%3Cpath d='M0,50C360,-4.67 360,-4.67 720,50S1080,104.67 1440,50' fill='none' stroke='%23000' stroke-width='6' stroke-linecap='square' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")} /* ---------------------------------------------------------------- preview ribbon and pending photos */ [data-look="classic"] .page:not(.page--home) .preview-ribbon{background:var(--c-gold);border-bottom:0;color:#000;font-size:.9375rem;font-weight:600} [data-look="classic"] .page:not(.page--home) .preview-ribbon a{color:inherit} [data-look="classic"] .page:not(.page--home) .about__photo{max-width:var(--measure-lead)} /* no photo yet: Home's quiet grey 3:2 frame with the open question in it */ [data-look="classic"] .page:not(.page--home) :is(.about__photo--pending,.post__image--pending){display:grid;place-items:center;aspect-ratio:3/2; padding:clamp(20px,4vw,48px);border:0;background:var(--c-rule);color:#000;text-align:center} [data-look="classic"] .page:not(.page--home) :is(.about__photo--pending,.post__image--pending) .todo{background:transparent;border-color:rgba(0,0,0,.4);color:#000;font-weight:600} [data-look="classic"] .page:not(.page--home) .figure figcaption{font-family:var(--cl-body);font-size:.9375rem;font-weight:600;color:#4a4a4a} /* ---------------------------------------------------------------- tables (procurement, drone facts) */ [data-look="classic"] .page:not(.page--home) .table{font-size:1.0625rem} [data-look="classic"] .page:not(.page--home) .table thead th{font-family:var(--cl-display);font-size:1rem;font-weight:400;letter-spacing:0;text-transform:uppercase;color:#000} [data-look="classic"] .page:not(.page--home) .table tbody th{font-weight:700} [data-look="classic"] .page:not(.page--home) .table td{font-weight:600} [data-look="classic"] .page:not(.page--home) .table :is(th,td){border-bottom-color:var(--rule-strong)} /* ---------------------------------------------------------------- watch page */ [data-look="classic"] .page:not(.page--home) .film-head .eyebrow{margin-bottom:14px} [data-look="classic"] .page:not(.page--home) .film-head__meta{margin-top:16px;font-family:var(--cl-body);font-size:1rem;font-weight:600;color:#4a4a4a} [data-look="classic"] .page:not(.page--home) .film-head__outcome{max-width:var(--measure-lead);font-size:var(--cl-large);font-weight:600;line-height:1.5;color:#000} /* the player sits on the light grey band with no frame, as 2024's case-study videos did (the plain look's band is dark); the player box itself is black. Less air above it, so the player starts on the first screen (at 1440 x 900 about 440 px down, the plain look's 395 plus the taller strip), and a vertical film fits under the strip. */ [data-look="classic"] .page--film .page-head.film-head{padding-bottom:clamp(20px,2.4vw,32px)} [data-look="classic"] .page:not(.page--home) .player-band{background:var(--c-mist)} /* phones keep the plain look's full-bleed player (no band padding), as the 2024 mobile video */ @media (min-width:768px){ [data-look="classic"] .page:not(.page--home) .player-band{padding-block:clamp(24px,2.4vw,36px)} } [data-look="classic"] .page:not(.page--home) .player{background:#000} [data-look="classic"] .page:not(.page--home) .player-band--portrait .player{max-height:min(80svh,calc(100svh - var(--header-h) - 96px))} [data-look="classic"] .page:not(.page--home) .player-band :focus-visible{outline-color:#000} [data-look="classic"] .page:not(.page--home) .captions-note{font-family:var(--cl-body);font-size:.9375rem;font-weight:600;color:#4a4a4a} [data-look="classic"] .page:not(.page--home) .story__label{margin-bottom:16px;font-size:var(--cl-h4);line-height:1.17} [data-look="classic"] .page:not(.page--home) .proof__quote{font-family:var(--cl-display);font-size:var(--cl-h3);font-style:normal;font-weight:400; line-height:1.14;letter-spacing:-.02em;text-transform:uppercase;text-wrap:balance} [data-look="classic"] .page:not(.page--home) .proof__figure figcaption{font-family:var(--cl-body);font-size:var(--cl-large);font-weight:600;color:#000} [data-look="classic"] .page:not(.page--home) .facts__list{border-top-color:var(--rule-strong)} [data-look="classic"] .page:not(.page--home) .facts__row{border-bottom-color:var(--rule-strong)} [data-look="classic"] .page:not(.page--home) .facts__row dt{font-family:var(--cl-body);font-size:1rem;font-weight:700;color:#000} [data-look="classic"] .page:not(.page--home) .facts__row dd{font-weight:600} /* a credit with no name ("Filmed and edited by …") reads across the row instead of in the narrow label column */ [data-look="classic"] .page:not(.page--home) .facts__row:has(> dd:empty) dt{grid-column:1 / -1} /* the transcript toggle as a small black button */ [data-look="classic"] .page:not(.page--home) .transcript summary{display:inline-flex;min-height:44px;padding:.7rem 1.3rem;list-style:none; font-family:var(--cl-button);font-size:1rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase;line-height:1.2; background:#000;color:#fff;border-radius:4px;transition:background-color .2s ease-in-out,color .2s ease-in-out} [data-look="classic"] .page:not(.page--home) .transcript summary::-webkit-details-marker{display:none} [data-look="classic"] .page:not(.page--home) .transcript summary:hover{background:var(--c-gold);color:#000} [data-look="classic"] .page:not(.page--home) .transcript__speaker{font-family:var(--cl-body);font-size:inherit;font-weight:700} [data-look="classic"] .page:not(.page--home) .next__label{margin:clamp(48px,5vw,72px) 0 24px} /* ---------------------------------------------------------------- approach: stages, promises, FAQ, fit */ [data-look="classic"] .page:not(.page--home) .stages{border-top-color:var(--rule-strong)} [data-look="classic"] .page:not(.page--home) .stage{border-bottom-color:var(--rule-strong)} /* poster numerals, no disc: the yellow sticker numerals belong to the promises */ [data-look="classic"] .page:not(.page--home) .stage__num{font-family:var(--cl-display);font-size:var(--cl-h2);font-weight:400;line-height:1;letter-spacing:-.02em;color:#000} [data-look="classic"] .page:not(.page--home) .stage__title{margin-bottom:16px} [data-look="classic"] .page:not(.page--home) #promises{text-align:center} [data-look="classic"] .page:not(.page--home) #promises .section__title,[data-look="classic"] .page:not(.page--home) #promises .prose{margin-inline:auto} [data-look="classic"] .page:not(.page--home) #promises .prose{margin-top:clamp(40px,5vw,64px)} [data-look="classic"] .page:not(.page--home) .day-rate{font-size:var(--cl-large);line-height:1.5} [data-look="classic"] .page:not(.page--home) .day-rate__links{font-family:var(--cl-body);font-size:1rem;font-weight:700} [data-look="classic"] .page:not(.page--home) .day-rate__links a{text-underline-offset:.2em} [data-look="classic"] .page:not(.page--home) .faq{border-top-color:var(--rule-strong)} [data-look="classic"] .page:not(.page--home) .faq__item{border-bottom-color:var(--rule-strong)} /* the questions in heavy caps, as the 2024 FAQ page set them */ [data-look="classic"] .page:not(.page--home) .faq__q{padding:20px 0;font-family:var(--cl-display);font-size:var(--cl-h4);font-weight:400;line-height:1.17; letter-spacing:-.02em;text-transform:uppercase;color:#000} [data-look="classic"] .page:not(.page--home) .faq__q::after{flex:none;font-family:var(--cl-button);font-size:1.75rem;font-weight:900;line-height:1;color:#000} [data-look="classic"] .page:not(.page--home) .faq__a{padding-bottom:28px} /* ---------------------------------------------------------------- pricing: the estimator */ /* small Archivo Black labels in caps, as Home's eyebrows and client lines (2024 set Archivo only in caps, bar the H1) */ [data-look="classic"] .page:not(.page--home) .est-legend{margin-bottom:14px;font-family:var(--cl-display);font-size:1rem;font-weight:400;letter-spacing:0;text-transform:uppercase;color:#000} /* choices as pill fields: black outline, white on hover, solid black when picked (gold dot: picked, as gold is hover on buttons) */ [data-look="classic"] .page:not(.page--home) .choice__body{padding:10px 18px;background:transparent;border:1px solid #000;border-radius:24px; font-family:var(--cl-body);font-size:1rem;font-weight:600} [data-look="classic"] .page:not(.page--home) .choice--card .choice__body{border-radius:12px} [data-look="classic"] .page:not(.page--home) .choice__label{font-weight:700} [data-look="classic"] .page:not(.page--home) .choice__label::before{width:14px;height:14px;border:1px solid #000;border-radius:50%;background:transparent} [data-look="classic"] .page:not(.page--home) .choice__hint{padding-left:24px;font-size:.9375rem;color:#4a4a4a} [data-look="classic"] .page:not(.page--home) .choice:hover .choice__body{background:#fff;border-color:#000} [data-look="classic"] .page:not(.page--home) .choice__input:checked + .choice__body{background:#000;border-color:#000;color:#fff} [data-look="classic"] .page:not(.page--home) .choice__input:checked + .choice__body .choice__label::before{background:var(--c-gold);border-color:var(--c-gold)} [data-look="classic"] .page:not(.page--home) .choice__input:checked + .choice__body .choice__hint{color:rgba(255,255,255,.75)} [data-look="classic"] .page:not(.page--home) .choice__input:focus-visible + .choice__body{outline:2px solid #000;outline-offset:3px} @media (forced-colors:active){ [data-look="classic"] .page:not(.page--home) .choice__input:checked + .choice__body .choice__label::before{background:Highlight} } [data-look="classic"] .page:not(.page--home) .range__value{font-family:var(--cl-body);font-size:1rem;font-weight:700} /* the result: a white panel on the grey band (the hero panel's 5px radius), sticky under the slim header */ [data-look="classic"] .page:not(.page--home) .est-result.card{background:#fff;border:0;border-radius:5px} [data-look="classic"] .page:not(.page--home) .est-result{top:calc(var(--cl-header-solid) + 24px)} [data-look="classic"] .page:not(.page--home) .est-result__flag{font-family:var(--cl-display);font-size:1rem;font-weight:400;letter-spacing:0;text-transform:uppercase;color:#000} [data-look="classic"] .page:not(.page--home) .est-summary{font-size:var(--cl-large);font-weight:600;line-height:1.4} /* the money line as Home's price band sets it; a range's separator in the same face and size (both spaces as wide), its dash kept with the second amount (.est-to__run, from pricing.js and the partial): a narrow card breaks before the dash */ [data-look="classic"] .page:not(.page--home) .est-result .est-num{font-family:var(--cl-display);font-size:var(--cl-h2);font-weight:400;line-height:1.1;letter-spacing:-.02em} [data-look="classic"] .page:not(.page--home) .est-to__run{white-space:nowrap} [data-look="classic"] .page:not(.page--home) .est-result .est-to{font-family:var(--cl-display);font-size:var(--cl-h2);font-weight:400;line-height:1.1;letter-spacing:-.02em} [data-look="classic"] .page:not(.page--home) :is(.est-floor-note,.est-note){font-family:var(--cl-body);font-size:.9375rem;font-weight:600} [data-look="classic"] .page:not(.page--home) .est-share{font-family:var(--cl-body);font-weight:600} [data-look="classic"] .page:not(.page--home) :is(.est-included,.est-changes,.est-larger,.est-similar){border-top-color:var(--rule-strong);font-size:1rem;font-weight:600} [data-look="classic"] .page:not(.page--home) .est-similar{font-family:var(--cl-body)} /* "Download a one-page PDF" would overflow the card at the 21 to 24 px no-wrap button size; balanced, a two-line label breaks at a space ("Download a" / "one-page PDF"), not inside "one-page" */ [data-look="classic"] .page:not(.page--home) .est-actions .btn{flex:1 1 100%;width:100%;padding:1rem 1.4rem;white-space:normal;text-wrap:balance;font-size:clamp(1.0625rem,.95rem + .35vw,1.25rem)} [data-look="classic"] .page:not(.page--home) .est-static__row{border-bottom-color:var(--rule-strong)} [data-look="classic"] .page:not(.page--home) .est-static__list{border-top-color:var(--rule-strong)} [data-look="classic"] .page:not(.page--home) .est-static__label{font-family:var(--cl-body);font-size:1rem;font-weight:700} [data-look="classic"] .page:not(.page--home) .est-static__floor{font-family:var(--cl-body);font-size:1rem;font-weight:600} /* ---------------------------------------------------------------- journal */ [data-look="classic"] .page:not(.page--home) .post-list{border-top-color:var(--rule-strong)} [data-look="classic"] .page:not(.page--home) .post-card{padding:clamp(24px,3vw,40px) 0;border-bottom-color:var(--rule-strong)} /* each title at the classic h3 size (main h2 would set every one at 46 px) */ [data-look="classic"] .page:not(.page--home) .post-card__title{font-size:var(--cl-h4);line-height:1.17} [data-look="classic"] .page:not(.page--home) .post-card__title a{text-decoration:none} [data-look="classic"] .page:not(.page--home) .post-card__title a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.15em} [data-look="classic"] .page:not(.page--home) .post-card__excerpt{max-width:var(--measure-prose);color:#000;font-weight:600} /* the reading bar in gold, over the strip */ [data-look="classic"] .page:not(.page--home) .progress{height:4px;background:var(--c-gold)} /* post titles run long and sit in the 660 px reading column: 32 to 46 px (the H2 size) instead of the 64 px page H1 (the 2024 post title was the 64 px H1 in a wider column; at 64 px here the longest title runs about six lines) */ [data-look="classic"] .page:not(.page--home) .post__head .page-head__title{font-size:clamp(2rem,1.3rem + 2.2vw,2.89rem)} /* ---------------------------------------------------------------- contact: the form on grey, Home's close form fields */ [data-look="classic"] .page:not(.page--home) .contact{background:var(--c-mist)} [data-look="classic"] .page:not(.page--home) .contact__form .field{gap:4px;margin-bottom:20px} [data-look="classic"] .page:not(.page--home) .contact__form .field__label{font-family:var(--cl-body);font-size:1rem;font-weight:600;color:#000} [data-look="classic"] .page:not(.page--home) .contact__form .field :is(input,select,textarea){min-height:44px;padding:8px 18px;border:1px solid #000;border-radius:24px; background-color:transparent;font-family:var(--cl-body);font-size:1rem;font-weight:600;color:#000} [data-look="classic"] .page:not(.page--home) .contact__form .field .field__select{padding-right:44px} [data-look="classic"] .page:not(.page--home) .contact__form .field textarea{min-height:180px;padding-top:12px} [data-look="classic"] .page:not(.page--home) .contact__form .field [aria-invalid="true"]{border-color:var(--error)} [data-look="classic"] .page:not(.page--home) .contact__form .field-row{column-gap:10px} [data-look="classic"] .page:not(.page--home) .contact__form :is(.field__error,.field__hint){font-family:var(--cl-body);font-weight:600} [data-look="classic"] .page:not(.page--home) .contact__form .field__hint{color:#4a4a4a} [data-look="classic"] .page:not(.page--home) .contact__form :is(.form__summary,.estimate-box){border-radius:12px;background:#fff} /* no thick left rule (the plain look's) on a rounded box: the estimate box is white on grey, the error summary a full red outline */ [data-look="classic"] .page:not(.page--home) .contact__form .estimate-box{border:0} [data-look="classic"] .page:not(.page--home) .contact__form .form__summary{border:2px solid var(--error)} [data-look="classic"] .page:not(.page--home) .contact__form .estimate-box__label{font-family:var(--cl-display);font-size:1rem;font-weight:400;letter-spacing:0;text-transform:uppercase;color:#000} [data-look="classic"] .page:not(.page--home) .contact__form :is(.estimate-box__text,.form__noscript){font-family:var(--cl-body);font-weight:600} [data-look="classic"] .page:not(.page--home) .contact__aside{font-family:var(--cl-body);font-size:1rem;font-weight:600} [data-look="classic"] .page:not(.page--home) .contact__aside-title{font-family:var(--cl-display);font-size:1rem;font-weight:400;line-height:1.3;letter-spacing:0;text-transform:uppercase;color:#000} [data-look="classic"] .page:not(.page--home) .contact__email{font-size:var(--cl-large);font-weight:700} [data-look="classic"] .page:not(.page--home) .contact__email a{text-underline-offset:.2em} /* the aside is about 230 px wide from 768 to 900: the address (no-wrap) at 18 px fits it */ @media (min-width:768px) and (max-width:899.98px){ [data-look="classic"] .page:not(.page--home) .contact__email{font-size:1.125rem} } /* ---------------------------------------------------------------- 404: the way-out links in heavy caps (as the footer nav) */ [data-look="classic"] .page:not(.page--home) .link-list{gap:10px} [data-look="classic"] .page:not(.page--home) .link-list a{font-family:var(--cl-display);font-size:var(--cl-h4);font-weight:400;line-height:1.2;letter-spacing:-.02em; text-transform:uppercase;text-decoration:none} [data-look="classic"] .page:not(.page--home) .link-list a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.15em} /* ---------------------------------------------------------------- print (the pricing sheet, any page) */ @media print{ [data-look="classic"] .page:not(.page--home),[data-look="classic"] .page:not(.page--home) main{background:#fff} [data-look="classic"] .page:not(.page--home) .page-head{padding-top:0} [data-look="classic"] .page:not(.page--home) .estimator-section{padding:0} [data-look="classic"] .page:not(.page--home) .site-footer::before{content:none} }