/* ================================================================= holywood.info — site stylesheet 1. the template's own CSS 2. shell (header / nav / mobile menu / footer) 3. widgets/*.css, appended verbatim in filename order (00-token-map.css is the one file rewired to this palette) ================================================================= */ /* ================= TOKENS ================= */ :root{ --black:#000; --card:#0e0e0e; --cream:#fef5e2; --blue:#6fc4eb; --orange:#ef561d; --pink:#f18ab2; --yellow:#faa918; --ink:#101012; --muted:#4a4a48; --sx:.86; /* horizontal compression of the display face */ --disp:Impact,Haettenschweiler,"Franklin Gothic Bold","Arial Narrow Bold",sans-serif; --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --serif:Georgia,"Times New Roman",serif; --vw:1440px; /* viewport width expressed in design px (never < 1440) */ } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;color-scheme:light} html:has(body.home){color-scheme:dark} body{margin:0;display:flex;flex-direction:column;min-height:100vh; font-family:var(--sans)} body.home{background:#000;color:#fff} body.pages{background:var(--cream);color:var(--ink)} img{display:block;border:0;max-width:100%} /* the template's own reset, scoped to the home canvas so it cannot reach the article markup Lasso renders into .pages */ :where(#stage *){margin:0;padding:0} #stage a{color:inherit;text-decoration:none} #stage ul{list-style:none} /* fixed 1440 design canvas, scaled down on narrower screens */ .stage{width:1440px;transform-origin:top left;position:relative;margin:0 auto} .viewport{overflow:hidden;max-width:100%} /* display type: Anton horizontally compressed to match the original face */ .d{font-family:var(--disp);font-weight:400;text-transform:uppercase;display:inline-block; transform:scaleX(var(--sx));transform-origin:left top;white-space:nowrap} .i{font-family:var(--serif);font-style:italic;font-weight:500;text-transform:none; font-variation-settings:"wdth" 87.5,"opsz" 100; transform:scaleX(.87);transform-origin:left top} .sec{position:relative;width:1440px} /* ---- full-bleed helpers: escape the 1440 grid up to the real viewport width ---- */ .fb{position:absolute;left:calc((1440px - var(--vw)) / 2);width:var(--vw)} .fbin{position:absolute;left:calc((var(--vw) - 1440px) / 2);top:0;width:1440px;height:100%} .clip{overflow:hidden} /* drag-scrollable carousels */ #tvp,#bvp{cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none} #tvp.grabbing,#bvp.grabbing{cursor:grabbing} .bg{position:absolute;top:0;height:100%;left:calc((1440px - var(--vw)) / 2);width:var(--vw)} .tex{background:url(/assets/noise.jpg) repeat top left;opacity:.85} /* ================= HERO ================= */ #hero{height:840px} #hero .bg{background:#000} /* The letters sit at 30-70% of this source's width and 42-57% of its height, so a centred crop holds them at every size and 44% puts them in the upper half of the box. The lower scrim starts at 58% rather than the original 42%: it still fades the photo into the black section underneath, but it no longer lays a third of its density over the sign. Both numbers are tied to this photo — re-measure them if it is swapped. The box was 786px inside a 1080px hero, which put the headline at 793 and the standfirst's chip at 1010 — below the fold on any laptop, so the whole first screen was photograph and nothing else. Everything below moved up by 240px together: the photo, the four headline lines, the card and the section's own height. The offsets between them are unchanged, so the composition is the same one, sitting higher. */ #hero .photo{top:0;height:546px; background: linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.34) 15%, rgba(0,0,0,0) 28%), linear-gradient(180deg, rgba(0,0,0,0) 58%, rgba(0,0,0,.14) 80%, rgba(0,0,0,.6) 93%, #000 100%), var(--hero-img) center 44%/cover no-repeat} #hero h1{position:absolute;left:0;top:0;font-size:91.9px;line-height:1;letter-spacing:-1.17px;color:#fff} .ln{position:absolute;line-height:1;white-space:nowrap} /* two lines now, anchored to the bottom exactly where the old last line sat, so .note (top:891px) stays aligned with it. #h1i's left/top are measured against the rendered width of "HAS A" — see the note in #create. */ /* Line 2 is "HAS A TO TELL." — #h1c's left is the measured right edge of the italic, which is scaled by .87 and cannot be derived from the font size. Re-measure it if the copy on either side changes. */ #h1a{left:37.9px;top:552.5px;letter-spacing:-1.2px} #h1b{left:38.2px;top:649.5px;letter-spacing:-0.976px} #h1i{left:235px;top:634px;letter-spacing:0} #h1c{left:491px;top:649.5px;letter-spacing:-0.976px} #hero h1 .i{font-size:115px;color:var(--orange)} /* The headline and the standfirst both open the featured story. The h1 has no box of its own (its three lines are absolutely placed), so the anchor around them is sized by nothing — the lines themselves are the hit area. */ #hero .hero-link{display:block} /* The standfirst is dressed as a call to action: the same copy, then a rule and an action row underneath, so it reads as the way into the article rather than as a caption. The orange edge and the filled chip are what carry it — at this size a plain outline disappeared against the black. top is set so the box bottoms out inside the hero. */ #hero .note{position:absolute;left:1109px;top:566px;width:258px;font-size:18.65px;line-height:25px;color:#c9c4bd; display:block;padding:16px 18px 15px;border:1px solid #55504a;border-radius:4px; background:rgba(255,255,255,.05); transition:background .2s ease,border-color .2s ease,color .2s ease} #hero .note-txt{display:block} #hero .note-cta{display:flex;align-items:center;justify-content:space-between;gap:10px; margin-top:15px;padding-top:14px;border-top:1px solid #3f3a35} #hero .note-cta b{font-size:20px;line-height:1;letter-spacing:.01em;color:var(--orange); transition:color .2s ease} /* the chip, not the glyph, is the affordance: a 32px orange disc reads as a target from across the page where a bare arrow does not */ #hero .note-cta i{flex:0 0 32px;width:32px;height:32px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-style:normal;font-size:17px;line-height:1; background:var(--orange);color:#fff; transition:transform .2s cubic-bezier(.33,1,.68,1),background .2s ease} #hero .note:hover{background:rgba(255,255,255,.09);border-color:var(--orange);color:#fff} #hero .note:hover .note-cta b{color:#ff7a44} #hero .note:hover .note-cta i{background:#ff6a30;transform:translate(2px,-2px)} /* ================= MARQUEE ================= */ #marquee{height:143px} #marquee .bg{background:#000;border-top:1px solid #242424;border-bottom:1px solid #242424} #mq{top:0;height:143px} #marquee .track{position:absolute;left:0;top:30px;display:flex;height:85px; animation:mq 26s linear infinite;will-change:transform} #mq:hover .track{animation-play-state:paused} #marquee .mset{display:flex;align-items:center;gap:54px;height:85px;flex:0 0 auto;padding-right:54px} .cat{display:flex;align-items:center;gap:14px;height:85px;white-space:nowrap; color:#e6e2dc;font-size:17px;letter-spacing:.04em;text-transform:uppercase;transition:color .22s} .cat:hover{color:#fff} .cicon{width:30px;height:30px;flex:0 0 30px;display:block} #marquee .g1{width:107px}#marquee .g2{width:106px}#marquee .g3{width:111px} #marquee .g4{width:115px}#marquee .g5{width:105px}#marquee .g6{width:68px} @keyframes mq{to{transform:translateX(calc(-1 * var(--mqw,1547px)))}} /* ================= CREATE + STATS ================= */ #create{height:975px} #create .bg.solid{background:#000} #create .shot{position:absolute;left:40px;top:121px;width:650px;height:400px; background:var(--shot-img) center/cover} #create h2{position:absolute;left:0;top:0;font-size:66.3px;line-height:1;letter-spacing:-1.2px;color:var(--orange)} #c1{left:730.2px;top:126px;letter-spacing:-1.2px}#c2{left:729.7px;top:198px;letter-spacing:-.8px}#c3{left:729.7px;top:270px;letter-spacing:-1.3px} #ci{left:959px;top:255.4px;letter-spacing:0}#c4{left:1242px;top:270px;letter-spacing:-1.6px} #c5{left:729.7px;top:354px;letter-spacing:-.8px}#c6{left:730.1px;top:427px;letter-spacing:-1.9px} #create .ch-link{display:block} #create h2 .i{color:#fff;font-size:87.5px} .stat{position:absolute;top:561px;width:444px;height:367px;background:var(--card); background-image:url(/assets/cardtex.jpg);background-repeat:repeat-y;background-position:left top; display:block;transition:background-color .22s} #s1{left:40px}#s2{left:498px}#s3{left:956px} .stat .scat{position:absolute;left:24.1px;top:30px;font-size:16.5px;line-height:1; letter-spacing:.06em;text-transform:uppercase;color:var(--orange)} /* the display face is compressed to 86%, and transform does not change layout width, so the wrap box is 400/.86 to make the rendered title fill the card's 400px column */ .stat .stitle{position:absolute;left:24.1px;top:76px;width:465.1px; font-family:var(--disp);font-weight:400;font-size:40px;line-height:1.06;letter-spacing:-.4px; text-transform:uppercase;color:#fff;transform:scaleX(var(--sx));transform-origin:left top} .stat .ssub{position:absolute;left:24.7px;top:300px;width:396px;font-size:16.5px;line-height:22px; color:#cbc6bf;text-transform:uppercase} .stat:hover .stitle{color:var(--orange)} /* ================= WORK ================= */ #work{height:2100px;color:var(--ink)} #work .bg{background:var(--cream)} #work h2{position:absolute;left:0;top:0;font-size:64px;line-height:1;letter-spacing:-.28px} #wk1{left:273px;top:154px;letter-spacing:-.291px} #work .sub{position:absolute;left:0;top:0;font-size:20px;line-height:1;color:var(--muted)} #ws1{left:470.8px;top:241.9px;letter-spacing:-.141px}#ws2{left:489.8px;top:267.9px;letter-spacing:-.125px} #work .rule{position:absolute;left:40px;top:315px;width:1360px;height:1px;background:#ded5c1} .wl{position:absolute;display:inline-block;font-family:var(--disp);text-transform:uppercase;font-size:24.44px;line-height:1;letter-spacing:1.02px; display:inline-block;transform:scaleX(var(--sx));transform-origin:left top;white-space:nowrap} .wimg-link{position:absolute;display:block;width:605px;height:606px;overflow:hidden} .wimg-link img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.33,1,.68,1)} /* Mel's neon sits at the left edge of a 750x422 frame; a centred square crop slices the sign in half. */ #work .i2 .wimg{object-position:left center} .wimg-link:hover img{transform:scale(1.03)} #work .t1{left:40.1px;top:402px;letter-spacing:1.04px} #work .i1{left:40px;top:447px} #work .t2{left:795.1px;top:805px;letter-spacing:1.686px} #work .i2{left:795px;top:856px} #work .t3{left:40.1px;top:1236px;letter-spacing:1.04px} #work .i3{left:40px;top:1285px} #work .copy{position:absolute;left:0;top:0;font-size:23.76px;line-height:1;color:#3a3a38} #wp1{left:792.5px;top:1527.6px}#wp2{left:792.3px;top:1561.6px}#wp3{left:792.3px;top:1629.6px;letter-spacing:-.026px} #wp4{left:792.3px;top:1663.6px;letter-spacing:-.176px}#wp5{left:791.8px;top:1697.6px;letter-spacing:-.098px} #work .how{position:absolute;left:0;top:0;font-size:30.25px;line-height:1;letter-spacing:2.98px;color:var(--ink)} #wh1{left:791.9px;top:1773.5px;letter-spacing:3.077px} /* badges */ /* ---- pills & badges (pure CSS) ---- */ .pill{position:absolute;background:var(--orange);color:#fff;border-radius:999px; display:flex;align-items:center;justify-content:center;white-space:nowrap; font-family:var(--serif);font-style:italic;font-weight:500;font-variation-settings:"wdth" 87.5; letter-spacing:-.03em;line-height:1;padding-bottom:3px} #pw{left:649.2px;top:87.2px;width:159.6px;height:51.9px;transform:rotate(-9.2deg);font-size:31px} #ps{left:305.7px;top:180px;width:144.5px;height:51.8px;transform:rotate(-9.29deg);font-size:30px} #pt{left:625.6px;top:89.5px;width:188.4px;height:51.9px;transform:rotate(-9.07deg);font-size:30px} #pd{left:623.8px;top:73.4px;width:194px;height:52.4px;transform:rotate(-8.63deg);font-size:29px} #pb{left:39.5px;top:148px;width:200px;height:51.3px;transform:rotate(-.15deg);font-size:29px} .badge{position:absolute} .badge b{position:absolute;left:0;top:50%;width:100%;text-align:center; font-family:var(--disp);font-weight:400;text-transform:uppercase;color:#111;display:block} .badge b i{display:block;font-style:normal} #bpink{left:1155px;top:381px;width:244px;height:244px;border-radius:50%;background:var(--pink)} #bpink svg{position:absolute;inset:0;width:244px;height:244px} #bpink text{font-family:var(--disp);font-size:26px;fill:#111;letter-spacing:1.2px} #bpink .ar{position:absolute;left:0;top:0;width:244px;height:244px;display:grid;place-items:center} #bpink .ar svg{position:static;display:block;width:40px;height:40px;margin-top:-2px;fill:none;stroke:#111;stroke-width:2.4;stroke-linecap:square;stroke-linejoin:miter} #bdeca{left:734px;top:482.5px;width:244px;height:244px;background:var(--blue); clip-path:polygon(50% 0,79.4% 9.55%,97.55% 34.55%,97.55% 65.45%,79.4% 90.45%,50% 100%,20.6% 90.45%,2.45% 65.45%,2.45% 34.55%,20.6% 9.55%)} #bdeca b{font-size:41.9px;line-height:44px;transform:translateY(-50%) rotate(26deg) scaleX(.86)} #borange{left:571px;top:906px;width:244px;height:244px;border-radius:50%;background:var(--orange)} #borange b{font-size:41.9px;line-height:44px;transform:translateY(-50%) rotate(38deg) scaleX(.86)} #byellow{left:158px;top:1775px;width:244px;height:244px;border-radius:50%;background:var(--yellow)} #byellow b{font-size:41.9px;line-height:44px;transform:translateY(-50%) rotate(-45deg) scaleX(.86)} /* ================= SERVICES ================= */ #services{height:1140px;color:#0c0c0c} #services .bg{background:var(--blue)} #services h2{position:absolute;left:0;top:0;font-size:64px;line-height:1;letter-spacing:.43px} #sv1{left:39.1px;top:104px;letter-spacing:0.458px}#sv2{left:40.2px;top:174px;letter-spacing:-0.735px} #services .p{position:absolute;left:623px;top:132px;width:412px;font-size:19.8px;line-height:26px;color:#123444} /* ---- Lasso search bar ---- The markup is a contract: Lasso binds by #query / #search and expects the Bootstrap 4 class names, so it ships verbatim and the gaps are closed here. no-gutters and btn-block do nothing in Bootstrap 5, and btn-orange / fs-14 are site classes Bootstrap never had. */ .form.row.no-gutters{--bs-gutter-x:0;margin-left:0;margin-right:0} .form.row.no-gutters > [class*="col-"]{padding-left:0;padding-right:0} .btn-block{display:flex;width:100%} .fs-14{font-size:14px} .btn-orange{background:var(--orange);color:#fff;border:0;border-radius:0;padding:0; align-items:center;justify-content:center;text-transform:uppercase; transition:background .18s} /* darker on hover, not lighter: #fff over this clears 4.5:1, which the base orange does not */ .btn-orange:hover,.btn-orange:focus{background:#ce4a19;color:#fff} /* Two boxes, not one plate: the wrapper carries no surface of its own, and the field and the button are each their own block with air between them. */ #services .searchbar{position:absolute;left:40px;top:258px;width:1360px;height:88px; padding:0;background:transparent;border:0} #services .searchbar > .form-group{height:88px} /* Bootstrap paints .border through --bs-border-color with !important, so the field is dressed through the variable rather than fought with one. */ #services .form-control{--bs-border-width:1px;--bs-border-color:#2d7ba3; height:88px;border-radius:0;background:var(--cream);color:#0c0c0c; font-size:21px;padding:0 24px} #services .form-control::placeholder{color:#6c6459} #services .form-control:focus{--bs-border-color:var(--orange); background:#fff;box-shadow:none;outline:none} /* The anchor still carries `btn`, so Bootstrap's own padding and radius have to be answered. The arrow comes from CSS because the markup is Lasso's. 24px keeps the label in WCAG's large-text bracket, where white on the brand orange clears the 3.0 threshold. Colour lives on this selector and not on .btn-orange because #stage a{color:inherit} outranks a bare class and would paint the label ink on orange. */ #services .btn-orange{position:static;left:auto;top:auto; display:flex;height:88px;width:calc(100% - 20px);margin:0 0 0 20px; gap:16px;color:#fff; font-family:var(--disp);font-size:24px;letter-spacing:.01em} #services .btn-orange::after{content:"→";font-family:var(--sans); font-size:20px;letter-spacing:0} /* Below 992px col-lg-8/col-lg-4 stop applying and the input and the button stack. The gutters are zeroed above, so the gap has to be declared. */ @media (max-width:991.98px){ .form.row.no-gutters > .form-group + .form-group{margin-top:10px} /* stacked now, so the gap that separated the two boxes moves to the top */ #services .btn-orange{width:100%;margin-left:0} } .sline{position:absolute;left:40px;width:1360px;height:0;border-top:1px dashed #4e9fc6} .snum{position:absolute;left:41px;font-size:59px;line-height:1} #sn1{top:489.2px;left:39.9px;transform:scaleX(.802)}#sn2{top:701.2px;left:39.9px;transform:scaleX(.858)}#sn3{top:913.2px;left:39.9px;transform:scaleX(.858)} #st1{top:447.5px;left:622.6px;letter-spacing:.477px}#st2{top:658.5px;left:622.6px;letter-spacing:.461px}#st3{top:870.5px;left:622.9px;letter-spacing:.274px} #su1{top:502.4px}#su2{top:714.4px}#su3{top:926.4px} .stit{position:absolute;display:inline-block;left:624px;font-size:39.56px;line-height:1;letter-spacing:.43px} .sul{position:absolute;left:622.5px;font-size:20px;line-height:29px;color:#12384c} /* Every row reads the same at rest: the marker and the heavier weight are a hover affordance now, not a permanent highlight that made the first item look preselected. Kept on the rather than the
  • so the trigger area is the text on desktop and the whole row on touch, and behind hover:hover so a tap does not leave a stuck state on a phone. */ .sul li a{position:relative;transition:color .18s} .sul li a::before{content:"";position:absolute;left:-21px;top:10px; border-left:9px solid #0c0c0c;border-top:5.5px solid transparent;border-bottom:5.5px solid transparent; opacity:0;transform:translateX(-4px);transition:opacity .18s,transform .18s} @media (hover:hover){ .sul li a:hover{color:#0c0c0c;font-weight:500} .sul li a:hover::before{opacity:1;transform:none} } .simg-link{position:absolute;left:1113px;display:block;width:286px;height:180px;overflow:hidden} .simg-link img{width:100%;height:100%;object-fit:cover;display:block} /* ================= TESTIMONIALS ================= */ #testi{height:976px} #testi .bg.solid{background:#000} #testi h2{position:absolute;left:0;top:0;font-size:61.7px;line-height:1;letter-spacing:.63px} #tt1{left:338px;top:158.5px} #testi .sub{position:absolute;left:0;top:0;font-size:19.8px;line-height:1;color:#b4afa8} #ts1{left:483.6px;top:243.3px;letter-spacing:-.071px}#ts2{left:506px;top:270.3px;letter-spacing:-.156px} .spark{position:absolute;fill:none;stroke:var(--orange);stroke-width:4;stroke-linecap:round} #spL{left:259px;top:128px;width:56px;height:50px} #spR{left:1124px;top:195px;width:37px;height:65px} #tvp{top:357px;height:397px} #testi .cards{position:absolute;left:-157px;top:0;display:flex;gap:15px;will-change:transform} .tc{flex:0 0 auto} /* the whole card is the link: wraps every element, so the black box, the photo and the empty space all lead to the guide */ .tc{display:block;width:580px;height:397px;background:#0a0a0a;position:relative;flex:0 0 auto; cursor:pointer;transition:background .2s} #tvp.grabbing .tc{cursor:grabbing} /* a drag in progress still reads as a drag */ .tc.on{background:var(--orange)} /* Lasso lifts block elements out of an , so the card's children are spans carrying display:block — the same shape .dbox, .stat and #hero .note use. */ /* margin-bottom reproduces what Bootstrap's reboot gave the

    (.5rem) and the

    (1rem) these spans replaced. Inert here — both boxes are positioned — but the mobile block below stacks them in a flex column, where dropping the 8px + 16px shortened the card by 24px. */ .tc .tc-cat{display:block;position:absolute;left:19.6px;top:26px;margin-bottom:.5rem;font-size:17.5px;line-height:1;letter-spacing:.036px} .tc .tc-ttl{display:block;position:absolute;left:20.4px;top:59px;margin-bottom:1rem;width:300px;font-size:26px;line-height:31px;letter-spacing:-.4px;color:#f1ede8;white-space:nowrap} .tc .who{display:block;position:absolute;left:19.7px;top:322px} .tc .who b{display:block;font-family:var(--disp);font-weight:400;font-size:19.8px;text-transform:uppercase;line-height:1;letter-spacing:-.4px; transform:scaleX(var(--sx));transform-origin:left} .tc .who .cta{display:inline-block;font-size:19px;margin-top:9px;line-height:1;color:#fff; border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:3px;transition:border-color .2s} /* Hovering anywhere on the card lights the call to action, so the whole box reads as one target. Behind (hover:hover) so a tap on a phone does not leave the card stuck in its hover state until the next tap elsewhere. */ @media (hover:hover){ .tc:hover .who .cta{border-color:#fff} .tc:not(.on):hover{background:#141414} } .tc img{position:absolute;left:307px;top:19px;width:253px;height:359px;object-fit:cover} #testi .nav{position:absolute;left:648px;top:812px;display:flex;gap:17px} #testi .nav button{width:63px;height:63px;border-radius:50%;border:0;background:#262626;color:#8d8d8d; display:grid;place-items:center;font-size:20px;font-family:inherit;cursor:pointer;transition:background .2s,color .2s} #testi .nav button svg,#blog .nav button svg{display:block;width:21px;height:21px; fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:square;stroke-linejoin:miter} #testi .nav button:hover{background:#3a3a3a;color:#fff} #testi .nav button.on{background:var(--orange);color:#fff} #testi .nav button.on:hover{background:#ff6a30} /* ================= DIRECTORS ================= */ #dirs{height:1196px;color:var(--ink)} #dirs .bg{background:var(--cream)} #dirs h2{position:absolute;left:0;top:0;font-size:64px;line-height:1} #dr1{left:290px;top:140px;letter-spacing:-0.019px}#dr2{left:301px;top:210px;letter-spacing:-0.592px}#dri{left:658px;top:201.5px;letter-spacing:0} #dr3{left:935px;top:210px;letter-spacing:0.347px}#dr4{left:526px;top:288px;letter-spacing:-0.333px} #dirs h2 .i{color:var(--orange);font-size:77.3px} #dirs .sub{position:absolute;left:0;top:0;font-size:20px;line-height:1;color:var(--muted)} #ds1{left:436.2px;top:368.9px;letter-spacing:-.187px}#ds2{left:523.6px;top:394.9px;letter-spacing:-.129px} /* ---- two content columns, no photography ---- */ .dbox{position:absolute;top:470px;height:620px;display:flex;flex-direction:column} #dlead{left:40px;width:670px;background:var(--orange);color:var(--cream);padding:38px 40px 36px} #dlist{left:730px;width:670px;background:#faf0dc;border:1px dashed #cbc2ae;color:var(--ink);padding:30px 36px} .dbox .tag{font-size:14px;line-height:1;letter-spacing:.19em;text-transform:uppercase;color:rgba(254,245,226,.72)} #dlead .bio{margin-top:26px;max-width:470px;font-size:19px;line-height:28px;color:rgba(254,245,226,.86)} #dlead .who{margin-top:auto} #dlead .nm1{display:block;font-family:var(--disp);font-weight:400;font-size:80px;line-height:74px; text-transform:uppercase;letter-spacing:-.6px;transform:scaleX(var(--sx));transform-origin:left} #dlead .role{display:block;font-family:var(--serif);font-style:normal;font-size:34px;line-height:1;margin-top:20px; font-variation-settings:"wdth" 87.5;color:rgba(254,245,226,.92)} #dlead .facts{display:flex;gap:44px;margin-top:34px;padding-top:24px;border-top:1px solid rgba(254,245,226,.32); font-size:15px;line-height:1;letter-spacing:.02em;text-transform:uppercase;color:rgba(254,245,226,.78)} #dlead .facts b{font-family:var(--disp);font-weight:400;font-size:23px;color:var(--cream);margin-right:7px; display:inline-block;transform:scaleX(var(--sx));transform-origin:left;vertical-align:-1px} #dlist .lhead{display:flex;align-items:baseline;justify-content:space-between;padding-bottom:20px; border-bottom:1px solid #ded3ba} #dlist .lhead b{font-family:var(--disp);font-weight:400;font-size:26px;line-height:1;text-transform:uppercase; letter-spacing:.35px;display:inline-block;transform:scaleX(var(--sx));transform-origin:left} #dlist .lhead em{font-style:normal;font-size:14px;letter-spacing:.16em;color:#6f6f6c;text-transform:uppercase} .drow{display:flex;align-items:center;height:71px;border-bottom:1px solid #e6dcc4;transition:color .2s} .drow:last-child{border-bottom:0} .drow em{font-style:normal;width:38px;flex:0 0 38px;font-size:12.7px;letter-spacing:-.2px;color:#6f6f6c} .drow b{flex:1;font-size:19.7px;font-weight:500;line-height:1;letter-spacing:-1.04px;color:#151517;transition:color .2s} .drow span{font-size:14.1px;letter-spacing:-.21px;color:#6f6f6c;text-align:right} .drow i{font-style:normal;width:34px;flex:0 0 34px;text-align:right;font-size:15px;color:#a89a7d; transition:transform .24s cubic-bezier(.33,1,.68,1),color .2s} .drow:hover b{color:var(--orange)} .drow:hover i{color:var(--orange);transform:translate(3px,-3px)} /* ================= BLOG ================= */ #blog{height:852px;color:var(--ink)} #blog .bg{background:var(--cream)} #blog h2{position:absolute;left:0;top:0;font-size:64px;line-height:1} #bg1{left:258.7px;top:144px;letter-spacing:0.061px}#bg2{left:39.7px;top:214px;letter-spacing:-0.829px} #blog .p{position:absolute;left:1025px;top:139px;width:375px;text-align:right;font-size:20px;line-height:26px;color:var(--muted)} #blog .nav{position:absolute;left:1257px;top:217px;display:flex;gap:22px} #blog .nav button{width:59px;height:59px;border-radius:50%;border:0;background:#eee2ca;color:#a3987f; display:grid;place-items:center;font-size:19px;font-family:inherit;cursor:pointer;transition:background .2s,color .2s} #blog .nav button:hover{background:#e4d6ba;color:#7d735f} #blog .nav button.on{background:var(--orange);color:#fff} #blog .nav button.on:hover{background:#ff6a30} .bc{position:relative;width:420px;flex:0 0 auto;padding-top:6px} .bc::before{content:"";position:absolute;left:-10px;top:6px;height:285px;border-left:1px dashed #cec5b1} .bc img{width:420px;height:285px;object-fit:cover} .bc .meta{font-size:12.7px;color:#5d5d59;margin-top:21.4px;line-height:1;letter-spacing:-.458px;margin-left:.5px} .bc-img{display:block} .bc .meta{display:block} /* Whole-card target: the article link is stretched over the entire card with a transparent overlay, so the photo, the category line, the title and the gaps between them all open the guide. The tag underneath keeps its own link — it points at the category, not at the article — so it is lifted above the overlay. */ .bc{cursor:pointer} #bvp.grabbing .bc{cursor:grabbing} /* the overlay hangs off .bc-img, not off the

    link: the title carries a scaleX() transform, which would make the

    the containing block and pin the overlay to the title alone */ .bc-img::after{content:"";position:absolute;inset:0;z-index:1} /* only the chip itself is lifted, not the whole row: the empty space beside it stays part of the card's own target */ .bc .tags a{position:relative;z-index:2;cursor:pointer} .bc img{transition:opacity .2s} @media (hover:hover){ /* same reason as .tc above */ .bc:hover img{opacity:.88} .bc:hover h3{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} } .bc h3{font-family:var(--disp);font-weight:400;font-size:19.8px;text-transform:uppercase;margin-top:12.1px;line-height:1.15;letter-spacing:-.5px;margin-left:-.6px; display:block;transform:scaleX(var(--sx));transform-origin:left} .bc .tags{display:flex;gap:4px;margin-top:17.4px} .bc .tags a{border:1px solid #cec5b1;height:41px;padding:0 16px;display:flex;align-items:center; font-size:14.1px;letter-spacing:.05em;text-transform:uppercase;color:#232325} /* 452, not 446: a card whose title wraps to two lines ends at 447.1px, so the old height sliced the 1px bottom border off the category tag. 75px of the section sit free below this, so nothing else moves. */ #bvp{top:331px;height:452px;clip-path:inset(0 0 0 calc((var(--vw) - 1440px) / 2 + 40px))} #blog .bcards{position:absolute;left:40px;top:6px;display:flex;gap:16px;will-change:transform} /* ================================================================= SHELL — header, dropdowns, mobile menu, footer. Lasso owns this markup; these rules dress it to match the template. ================================================================= */ /* logo: the skill's cleanup — these three rules only. max-width raised from the spec's 120px at the client's request; the img keeps its 3:1 attributes, so that ratio still drives the box. flex:0 0 auto matters: the header is a flex row and the logo is its only shrinkable item, so without it a nav that does not fit collapses the logo to zero width instead of the nav giving way. */ .logo{width:200px;max-width:200px;flex:0 0 auto} .logo a{display:flex} img.logo{width:100%;height:auto} .site-header{position:relative;z-index:30;display:flex;align-items:center;gap:20px; height:128px;padding:0 32px;background:#0b0b0b} body.home .site-header{position:absolute;top:0;left:0;right:0;background:transparent} .site-header nav{margin-left:auto} .nav-links{display:flex;align-items:center;gap:16px;margin:0;padding:0;list-style:none} .nav-item{position:relative} .nav-item > a{display:inline-flex;align-items:center;gap:6px;padding:10px 0; font-size:13.5px;line-height:1;letter-spacing:.04em;text-transform:uppercase; color:rgba(255,255,255,.82);white-space:nowrap;text-decoration:none;transition:color .22s} .nav-item > a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1.5px; background:var(--orange);transform:scaleX(0);transform-origin:left; transition:transform .28s cubic-bezier(.33,1,.68,1)} .nav-item > a:hover{color:#fff} .nav-item > a:hover::after{transform:scaleX(1)} /* the last item keeps the pill the template used for its call to action */ .nav-links .nav-item:last-child > a{height:42px;padding:0 18px;border-radius:999px; background:#fff;color:#111;font-family:var(--disp);font-size:17px;letter-spacing:.015em; transition:background .22s,color .22s} .nav-links .nav-item:last-child > a::after{display:none} .nav-links .nav-item:last-child > a:hover{background:var(--orange);color:#fff} /* plain white bars, no disc. The 52px box stays: it is the tap target, and the hero's top gradient (72% black at the very top) keeps the bars legible over the photo on the home page. */ .nav-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;gap:6px; width:52px;height:52px;margin-left:auto;border:0;background:transparent;cursor:pointer} .nav-toggle-bar{display:block;width:26px;height:2.5px;background:#fff;border-radius:2px; transition:transform .25s cubic-bezier(.33,1,.68,1),opacity .18s ease} /* Open state folds the bars into an X so the button reads as "close". Bootstrap flips aria-expanded on the trigger itself when the panel opens, so this needs no JS of its own. 8.5px is the bar height plus the gap — the distance each outer bar travels to meet the middle one. */ .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){transform:translateY(8.5px) rotate(45deg)} .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){opacity:0;transform:scaleX(.2)} .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)} #mobile-menu{background:#0b0b0b;border-top:1px solid #242424} /* On the home page the header is absolute so it can float over the hero, which left the collapsing menu opening behind it: the first item landed under the logo. Push the menu clear of the header's own height. .pages keeps the header in flow, so this is scoped to .home. */ body.home #mobile-menu{margin-top:128px} .mobile-menu-inner{padding:14px 24px 26px} .mobile-menu-inner ul{margin:0;padding:0;list-style:none} .mobile-menu-inner > ul > li{border-bottom:1px solid #232323} .mobile-menu-inner > ul > li > a{display:block;padding:16px 0;font-size:16px;letter-spacing:.05em; text-transform:uppercase;color:#e6e2dc;text-decoration:none} .mobile-sublist{max-height:0;overflow:hidden;transition:max-height .3s ease} .mobile-menu-inner > ul > li.is-open .mobile-sublist{max-height:640px} .mobile-sublist a{display:block;padding:11px 0 11px 16px;font-size:15px;color:#b4afa8;text-decoration:none} /* ---- FOOTER ---- The closing block used to be #foot, a section of the 1440 canvas that only layout.html carried — which is why an article page got a bare legal strip where the home page got the designed footer. It is rebuilt here in flow layout and lives in the shell instead, so home-page.html and all-pages.html render the same markup and the same CSS. Type is sized in vw clamps rather than fixed px: the canvas above is scaled by a transform, and a footer set in absolute px would grow away from it as the window narrows. */ .site-footer{background:#000;color:#7f7a71;padding:0 40px 36px;text-align:center} .site-footer a{color:inherit;text-decoration:none} .foot-rule{height:0;border-top:1px dashed #383838;margin:0 0 32px} .site-footer > .logo{display:block;margin:0 0 28px} .site-footer > .logo a{display:flex} .foot-feature{max-width:1360px;margin:0 auto;text-align:left; display:grid;grid-template-columns:1.35fr 1fr; /* the design's 737 : 545 */ gap:0 78px;align-items:start;padding-bottom:38px} /* the dashed divider the design drew at x=777 */ .foot-feature-copy{padding-right:78px;border-right:1px dashed #383838} .site-footer .foot-feature-title{margin:0;font-weight:400; font-size:clamp(30px,4.5vw,65.2px);line-height:1;letter-spacing:-.41px;color:#fff} .foot-feature-title a{display:block} /* each line is its own block: .d is inline-block by default and the two halves of the middle line have to sit on one line together */ .foot-feature-title .d,.foot-title-row{display:block} .foot-title-row .i,.foot-title-row .d{display:inline-block} .foot-feature-title .i{font-size:1.34em;color:var(--orange)} /* padding, not margin: at a wrap it lands at the end of the line where it cannot indent the next one — and it survives markup that collapses the whitespace between the two tags */ .foot-title-row .i{padding-right:.18em} .foot-feature-title a:hover .i{color:#ff6a30} @media (min-width:1200px){.foot-title-row{white-space:nowrap}} .site-footer .foot-feature-p{max-width:640px;margin:34px 0 0; font-size:clamp(16px,1.45vw,20px);line-height:1.4;letter-spacing:-.136px;color:#c4bfb9} .site-footer .foot-feature-p b{display:block;margin-bottom:12px;font-size:14px;font-weight:400; letter-spacing:.16em;text-transform:uppercase;color:var(--orange)} .foot-feature-img{display:block;overflow:hidden} /* the Paramount source is a 640x960 portrait: a centred landscape crop keeps only the fountain and loses the lettering, so bias it towards the top */ .foot-feature-img img{width:100%;height:auto;aspect-ratio:545/404; object-fit:cover;object-position:center 20%; transition:transform .5s cubic-bezier(.33,1,.68,1)} .foot-feature-img:hover img{transform:scale(1.03)} .footer-links{display:flex;flex-wrap:wrap;justify-content:center; gap:24px 46px;margin:0 0 32px} .footer-links a{font-family:var(--sans);font-size:clamp(15px,1.5vw,21.2px);line-height:1; text-transform:uppercase;color:#fff;white-space:nowrap; border-bottom:1px solid #6d6d6d;padding-bottom:6px} .footer-links a:hover{border-bottom-color:var(--orange)} .footer-links i{font-style:normal;font-size:.62em;vertical-align:.35em;margin-left:2px} .site-footer .site-disclaimer{max-width:900px;margin:0 auto 10px;font-size:13px;line-height:20px;color:#7f7a71} .site-footer > span{display:block;font-size:13px;line-height:20px;color:#7f7a71} /* An article page closes with the legal strip alone: links, disclaimer, copyright. The featured story, the footer logo and both dashed rules belong to the home page's closing section — on an article they repeat what the page already said. Hidden here rather than cut out of all-pages.html: the two shells have to stay byte-identical apart from the body class, which is what Lasso expects and what the validator checks. The top padding replaces the space the hidden rows used to give the strip. */ .pages .site-footer{padding-top:40px} .pages .site-footer > .foot-rule, .pages .site-footer > .logo, .pages .foot-feature{display:none} @media (max-width:767px){ .site-header{height:88px;padding:0 20px} .site-header nav{display:none} .nav-toggle{display:flex} body.home #mobile-menu{margin-top:88px} /* matches the shorter header */ } /* ================================================================= MOBILE / TABLET (< 1024px) The design above is a fixed 1440px canvas: every element is placed by absolute left/top and main.js shrinks the whole thing with a CSS transform. That works down to about 1024px; below it the scale factor drops far enough that body copy lands between 4px and 7px and almost every link falls under the 44px minimum touch target. So below 1024px main.js stops scaling and this block takes over: the absolute grid is unwound section by section and each one reflows as a single column at real type sizes. Nothing here applies at 1024px and up — the desktop design is untouched. ================================================================= */ @media (max-width:1023.98px){ /* ---- canvas: stop scaling, let the page flow ---- */ .viewport{overflow:visible;height:auto!important} .stage{width:100%!important;transform:none!important;margin:0} body.home .main-wrapper{overflow:visible!important} .sec{width:100%;height:auto!important;padding:52px 20px 56px; display:flex;flex-direction:column;align-items:stretch} /* Full-bleed helpers keyed to --vw: on mobile the section IS the width. The content is static now, and static content paints below a positioned sibling, so the .bg layer has to be pushed behind it explicitly. Each section isolates so that -1 stays inside the section. */ .sec{isolation:isolate} .sec > .bg{left:0;width:100%;z-index:-1} .fb{position:relative;left:auto;width:auto} .fbin{position:static;width:auto;height:auto} /* ---- type: unwind the nowrap/absolute line spans so headlines wrap ---- Once these spans reflow inline, the only thing separating the words is the whitespace sitting between the tags — and that whitespace does not survive a build that collapses markup, which runs the words together ("WHOMAINTAINS IT, ANDWHETHERyou..."). Five of the pairs never had it at all. So each container is set to font-size:0, which gives that whitespace no width whether it survives or not; the type size moves onto the spans through --ln; and the word gap is declared explicitly. It is padding on the preceding span rather than margin on the following one because at a line break padding lands at the end of the line, where it is invisible, instead of indenting the next line. */ .ln{position:static;display:inline;white-space:normal;font-size:var(--ln,inherit)} .ln:not(:last-child){padding-right:.24em} /* The padding above restores the GAP the collapsed whitespace took away, but not the LINE BREAK it also took away: with no character between the tags the browser reads "HAPPENED" and "ON THESE STREETS" as the single unbreakable token "HAPPENEDON", which then runs past the right edge and leaves a black strip down the side of the page. A zero-width space is a break opportunity that no build can strip, because it is not in the markup — it is generated here. Zero width, so the .24em gap still sets the spacing on its own. */ .ln:not(:last-child)::after{content:"\200B"} .d{display:inline;transform:none;white-space:normal} .i{display:inline;transform:none} /* ---- the rotated section labels, flattened and moved above the headline ---- */ .pill{position:static;order:-1;align-self:flex-start;transform:none; width:auto;height:38px;padding:0 18px 3px;margin-bottom:14px;font-size:20px} #pw,#ps,#pt,#pd,#pb{position:static;left:auto;top:auto;transform:none; width:auto;height:38px;font-size:20px} /* ================= HERO ================= */ /* The hero owns exactly one screen and the photo takes everything the words do not. A fixed 3/4 box left the standfirst and its Read the guide chip below the fold on a phone; sizing the photo by what is left over puts the sign, the headline and the call to action on the first screen at any height. The header is absolute and transparent on the home page, so it floats over the photo instead of eating into this. The crop needs no attention at any of these heights: the sign spans the middle of the source both ways, and the centred cover position the desktop rule sets already holds it. Every measurement below is trimmed against the desktop values — the bottom padding, the gap over the headline, the card's own padding — because the photo is only ever as tall as what those leave behind. They buy it around 70px, which is the difference between a banner and a hero. What they do not touch is the 44px chip: that is the touch minimum. svh is the viewport with the URL bar out; the vh line before it is the fallback. The floor keeps the photo from collapsing in landscape. */ #hero{min-height:100vh;min-height:100svh;padding:0 0 20px} #hero .photo{position:relative;top:auto;left:auto;width:100%; flex:1 1 auto;height:auto;aspect-ratio:auto;min-height:180px} #hero h1{position:static;padding:16px 20px 0;--ln:clamp(34px,9.4vw,58px); font-size:0;line-height:1.03;letter-spacing:-.5px} #hero h1 .i,#h1i{font-size:calc(var(--ln) * 1.16);letter-spacing:0} /* keep the closing phrase whole: allowed to break, it strands "TELL." on a line of its own instead of giving the headline three even lines */ #h1c{white-space:nowrap} #hero .note{position:static;left:auto;top:auto;width:auto; margin:14px 20px 0;padding:13px 18px 12px; font-size:16px;line-height:23px} /* 44px of chip plus the label keeps the whole row above the touch minimum */ #hero .note-cta{margin-top:11px;padding-top:11px} #hero .note-cta b{font-size:19px} #hero .note-cta i{flex:0 0 44px;width:44px;height:44px;font-size:20px} /* ================= MARQUEE ================= The desktop marquee animates, which makes every category a moving target. On touch it becomes a plain horizontal scroller instead, so the links hold still long enough to be tapped. */ #marquee{padding:0} #mq{position:static;height:auto;overflow-x:auto;overflow-y:hidden; -webkit-overflow-scrolling:touch;scrollbar-width:none} #mq::-webkit-scrollbar{display:none} #marquee .track{position:static;left:auto;top:auto;height:auto; animation:none;padding:0 20px} #marquee .mset{gap:24px;padding-right:24px;height:auto} #marquee .mset:not(:first-child){display:none} /* main.js clones for the loop */ .cat{height:62px;font-size:14px;gap:9px} .cicon{width:24px;height:24px;flex:0 0 24px} /* ================= WHAT THIS IS + STATS ================= */ #create .shot{position:static;width:100%;height:auto;aspect-ratio:13/8; margin-bottom:26px} #create h2{position:static;--ln:clamp(30px,8.2vw,46px);font-size:0;line-height:1.05} #create h2 .i{font-size:calc(var(--ln) * 1.2)} .stat{position:static;left:auto;top:auto;width:100%;height:auto; padding:24px 22px 26px;margin-top:14px} .stat .scat{position:static;left:auto;top:auto;display:block; font-size:13px;letter-spacing:.08em} .stat .stitle{position:static;left:auto;top:auto;display:block;width:100%; transform:none;font-size:clamp(25px,6.4vw,34px);line-height:1.08;margin-top:12px} .stat .ssub{position:static;left:auto;top:auto;display:block;width:auto; font-size:14px;line-height:20px;margin-top:16px} /* ================= FEATURED GUIDES ================= The only section that wraps: a row container so the four badges can pair up two per line while everything else takes a full line. */ #work{flex-direction:row;flex-wrap:wrap;align-items:flex-start; justify-content:space-between;gap:16px} #work > *{flex:0 0 100%} #work > .pill{flex:0 0 auto} /* the label hugs its text, not the row */ #work h2{position:static;font-size:clamp(30px,8.2vw,46px);line-height:1.05} #work .sub{position:static;--ln:16px;font-size:0;line-height:24px} #work .rule{position:static;width:100%;height:1px;margin:4px 0} .wl{position:static;left:auto;top:auto;transform:none;white-space:normal; font-size:clamp(19px,5vw,25px);line-height:1.15;padding:14px 0 10px} .wimg-link{position:static;left:auto;top:auto;width:100%;height:auto; aspect-ratio:1} #work .copy{position:static;--ln:17px;font-size:0;line-height:26px} #work .how{position:static;font-size:0} /* the anchor sets its own size */ #wh1{display:inline-block;padding:16px 24px;border:1px solid var(--ink); font-size:18px;line-height:1;letter-spacing:2px} /* Badges: kept, at half size, two per row. They stay position:relative because .badge b is absolutely centred inside them, but the design's left/top offsets have to go or relative positioning re-applies them. */ #work > .badge{flex:0 0 calc(50% - 8px)} #bpink,#bdeca,#borange,#byellow{position:relative;left:auto;top:auto; width:auto;height:auto;aspect-ratio:1} #bdeca b,#borange b,#byellow b{font-size:clamp(16px,6.2vw,27px);line-height:1.08} #bpink svg,#bpink .ar{width:100%;height:100%} #bpink .ar svg{width:30px;height:30px} /* ================= BROWSE BY CATEGORY ================= */ #services h2{position:static;--ln:clamp(30px,8.2vw,46px);font-size:0;line-height:1.05} #services .p{position:static;left:auto;top:auto;width:auto; font-size:16px;line-height:24px;margin-bottom:22px} /* the plate joins the flow like everything else here. Below 992px the col-lg-8/4 split stops applying and the two groups stack on their own. */ #services .searchbar{position:static;left:auto;top:auto;width:auto;height:auto; margin:14px 0 4px} #services .searchbar > .form-group{height:auto} #services .form-control{height:52px;font-size:16px;padding:0 16px} #services .btn-orange{height:52px;font-size:20px} .sline{position:static;width:100%;margin:26px 0 0} .snum{position:static;left:auto;top:auto;transform:none; font-size:32px;line-height:1;margin-top:22px} #sn1,#sn2,#sn3{transform:none;left:auto;top:auto} .stit{position:static;left:auto;top:auto;transform:none;display:block; font-size:clamp(26px,6.8vw,36px);line-height:1.05;padding:8px 0 10px} #st1,#st2,#st3{left:auto;top:auto} .sul{position:static;left:auto;top:auto;padding-left:21px; font-size:16px;line-height:1} #su1,#su2,#su3{top:auto} .sul li a{display:block;padding:13px 0;font-size:16px;line-height:20px} .sul li + li{border-top:1px solid rgba(12,12,12,.14)} .sul li a::before{top:17px} /* centred on the taller touch row */ .simg-link{position:static;left:auto;top:auto;width:100%;height:auto; aspect-ratio:286/180;margin-top:18px} /* ================= LATEST GUIDES (carousel) ================= */ .spark{display:none} #testi h2{position:static;font-size:clamp(30px,8.2vw,46px);line-height:1.05} #testi .sub{position:static;--ln:16px;font-size:0;line-height:24px;margin-bottom:26px} /* The rows below are native scrollers on touch. The arrows stay: swiping is not discoverable, and main.js repoints them at scrollBy() so a press advances the row by exactly one card. #blog declares its nav before the row in the markup (the desktop grid puts it top-right), so it is ordered back under the cards here. */ #testi .nav,#blog .nav{position:static;left:auto;top:auto; display:flex;gap:14px;margin-top:24px} #blog .nav{order:1} #testi .nav button,#blog .nav button{width:52px;height:52px} #testi .nav button svg,#blog .nav button svg{width:19px;height:19px} /* the drag-carousels become native scroll-snap rows */ #tvp,#bvp{position:static;left:auto;top:auto;height:auto;width:auto; clip-path:none;overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory;scroll-padding:0 20px; touch-action:auto;cursor:auto;-webkit-user-select:auto;user-select:auto; -webkit-overflow-scrolling:touch;scrollbar-width:none; margin:0 -20px} #tvp::-webkit-scrollbar,#bvp::-webkit-scrollbar{display:none} #testi .cards,#blog .bcards{position:static;left:auto;top:auto; transform:none!important;gap:12px;padding:0 20px;will-change:auto} /* main.js clones for the desktop infinite loop. Scoped to #stage so it outranks .tc's own display, which would otherwise re-show them when a desktop window is dragged down across the breakpoint. */ #stage .is-clone{display:none} .tc{width:min(84vw,360px);height:auto;padding:22px 20px 26px; scroll-snap-align:center;display:flex;flex-direction:column} .tc .tc-cat{position:static;left:auto;top:auto;font-size:13px;letter-spacing:.06em} /* the
    s stay: hiding them would join the words either side, and the designer's three short lines fit the card at this size anyway */ .tc .tc-ttl{position:static;left:auto;top:auto;width:auto;white-space:normal; font-size:21px;line-height:27px;margin-top:12px} .tc img{position:static;left:auto;top:auto;order:3;width:100%;height:auto; aspect-ratio:253/359;max-height:270px;margin-top:18px} .tc .who{position:static;left:auto;top:auto;order:4;margin-top:18px} /* flex item: ya se blockifica */ .tc .who b{transform:none;font-size:15px} .tc .who .cta{font-size:16px;padding:14px 2px} /* 16 + 28 = 44px tall */ /* ================= EDITORS' PICK ================= */ #dirs h2{position:static;--ln:clamp(30px,8.2vw,46px);font-size:0;line-height:1.05} #dirs h2 .i{font-size:calc(var(--ln) * 1.16)} #dirs .sub{position:static;--ln:16px;font-size:0;line-height:24px;margin-bottom:24px} /* both boxes carry their 670px width on an id selector, so the override has to be an id selector too or the column overflows the screen */ .dbox{position:static;left:auto;top:auto;width:auto;height:auto} #dlead,#dlist{position:static;left:auto;top:auto;width:auto;height:auto} #dlead{padding:28px 22px 30px} #dlead .bio{max-width:none;font-size:16px;line-height:25px;margin-top:20px} #dlead .who{margin-top:32px} #dlead .nm1{transform:none;font-size:clamp(42px,11.5vw,64px);line-height:.96} #dlead .role{font-size:22px;margin-top:14px} #dlead .facts{gap:20px;margin-top:26px;padding-top:20px} #dlead .facts b{transform:none;font-size:19px} #dlist{margin-top:16px;padding:22px 20px} #dlist .lhead b{transform:none;font-size:22px} /* one row per guide: number + title + arrow, category on its own line */ .drow{height:auto;min-height:66px;padding:15px 0;flex-wrap:wrap; align-items:flex-start;column-gap:10px} .drow em{flex:0 0 26px;width:26px;font-size:12px;padding-top:3px} .drow b{flex:1 1 0;font-size:17px;line-height:1.25;letter-spacing:-.2px} .drow i{order:3;flex:0 0 20px;width:20px;padding-top:2px} .drow span{order:4;flex:0 0 100%;margin-left:36px;margin-top:5px; font-size:13px;text-align:left} /* ================= LATEST (blog carousel) ================= */ #blog h2{position:static;--ln:clamp(30px,8.2vw,46px);font-size:0;line-height:1.05} #blog .p{position:static;left:auto;top:auto;width:auto;text-align:left; font-size:16px;line-height:24px;margin-bottom:26px} .bc{width:min(78vw,320px);padding-top:0;scroll-snap-align:center} .bc::before{display:none} .bc img{width:100%;height:auto;aspect-ratio:420/285} .bc .meta{font-size:13px;margin-top:16px} .bc h3{transform:none;font-size:19px;line-height:1.2;margin-top:4px} .bc h3 a{display:block;padding:11px 0} /* the title is its own target */ .bc .tags{margin-top:12px;flex-wrap:wrap} .bc .tags a{height:44px;padding:0 14px;font-size:13px} /* Reading measure. On a phone the column is narrower than this already, so it only bites from roughly tablet width up. In rem, not ch or em: four of these carry font-size:0 so their inter-tag whitespace has no width, and a font-relative cap would resolve to zero and collapse the block. */ #hero .note,#work .sub,#work .copy,#services .p,#testi .sub,#dirs .sub, #blog .p,#dlead .bio,.stat .ssub{max-width:31rem} /* ---- shell ---- */ .site-footer{padding:0 20px 32px} .foot-rule{margin:0 0 24px} .site-footer > .logo{margin:0 0 20px} .foot-feature{display:block;padding-bottom:28px} .foot-feature-copy{padding-right:0;border-right:0} .site-footer .foot-feature-title{font-size:clamp(31px,8.4vw,46px);letter-spacing:normal} .site-footer .foot-feature-p{margin-top:20px;max-width:31rem;font-size:16px;line-height:25px} .foot-feature-img{margin-top:24px} /* the nine required slugs: a stacked list instead of a packed row */ .footer-links{display:block;text-align:left;margin:0 0 24px} .footer-links a{display:block;white-space:normal; font-size:17px;line-height:1.2;padding:17px 0; border-bottom:1px solid #2e2e2e} .footer-links a:first-child{border-top:1px solid #2e2e2e} .footer-links a:last-child{border-bottom:0} /* 16px matches what the widget stylesheet already gives .pages p, so the legal strip reads the same on the home page and on an article */ .site-footer .site-disclaimer,.site-footer > span{font-size:16px;line-height:24px} } /* ----------------------------------------------------------------- HEADER NAV SWITCH (< 1400px) The desktop nav is one row of eight items plus a pill: measured min-content is 1102px, so with the 200px logo, the 20px gap and the 64px of padding the header row needs about 1386px. Below that the row overflows and the logo — the only shrinkable item — is squeezed away. So the hamburger takes over here, above the 1024px point where the canvas itself starts reflowing. The !important beats Bootstrap's own .d-md-none utility on the button. ----------------------------------------------------------------- */ @media (max-width:1399.98px){ .site-header nav{display:none} .nav-toggle,.nav-toggle.d-md-none{display:flex!important} } /* ----------------------------------------------------------------- TABLET (700-1023px) Same reflowed layout, but there is room for two columns, so the repeated blocks pair up instead of running as one very wide stack. ----------------------------------------------------------------- */ @media (min-width:700px) and (max-width:1023.98px){ .sec{padding:64px 32px 68px} /* the three stat cards, two up */ #create{flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:16px} #create > *{flex:0 0 100%} #create > .stat{flex:1 1 calc(50% - 8px);margin-top:0} #create .shot{aspect-ratio:16/9} /* four badges across one row instead of two */ #work > .badge{flex:0 0 calc(25% - 12px)} #work .wimg-link{max-width:560px} #work .badge b{font-size:clamp(15px,2.6vw,22px)} /* category rows: photo beside the sublist */ #services .simg-link{max-width:420px} /* the featured guide and the list of seven sit side by side again */ #dirs{flex-direction:row;flex-wrap:wrap;align-items:stretch;gap:16px} #dirs > *{flex:0 0 100%} #dirs > #dlead{flex:1 1 calc(50% - 8px)} #dirs > #dlist{flex:1 1 calc(50% - 8px);margin-top:0} .foot-feature-img{max-width:560px} } /* ===================== WIDGETS ===================== */ /* ---------- 00-token-map.css (rewired) ---------- */ /* WIDGET TOKEN MAP THE ONLY FILE IN widgets/ THAT CHANGES PER SITE. Every other file in this folder is identical across all domains and must never be edited for a single site. They reference --w-* tokens only. This block wires those tokens to whatever the site's own palette calls things, so the designer keeps their own variable names. Right-hand side = this site's variables, taken from its :root. Left-hand side = fixed. Do not rename. holywood.info mapping. */ :root { --w-white: #ffffff; --w-bg-alt: var(--cream); /* page/zebra background */ --w-bg-tint: #f7edd8; /* hover tint */ --w-brand: var(--orange); /* links, accents, focus */ --w-brand-dark: var(--ink); /* headings, table head */ --w-brand-dark-2: #000000; /* active/pressed */ --w-highlight: var(--yellow); --w-text-muted: var(--muted); --w-border: #cbc2ae; --w-radius: 0px; --w-shadow: 0 1px 2px rgba(16,16,18,.06); --w-shadow-md: 0 6px 18px rgba(16,16,18,.10); --w-shadow-2: 0 2px 6px rgba(16,16,18,.08); --w-shadow-3: 0 12px 30px rgba(16,16,18,.14); } /* ---------- 01-layout-reset.css (verbatim) ---------- */ /* LAYOUT RESET Shell/container resets required by the Lasso wrapper. Not a widget, but must ship with them. Lasso emits this markup; we only dress it. Uses --w-* tokens only — see 00-token-map.css. Never hardcode a hex here. CHANGELOG 2026-08-16 Extracted verbatim from the atlanta.com production build. */ .home .container.main { width: 100%; max-width: 100%; padding: 0; } .container.layout { max-width: 100%; padding: 0; } .container.layout .row.layout { margin: 0; } .home .container.layout .row.layout > .cols { padding: 0; } .pages .main-wrapper .container.main { padding: 24px 16px; } /* ---------- 02-fonts-reset.css (verbatim) ---------- */ /* FONTS RESET Typography inside .pages article bodies. Lasso emits this markup; we only dress it. Uses --w-* tokens only — see 00-token-map.css. Never hardcode a hex here. CHANGELOG 2026-08-16 Extracted verbatim from the atlanta.com production build. */ .pages h1, .pages h2 { font-weight: 700; color: var(--w-brand-dark); } .pages h1, .pages h2, .pages h3, .pages p, .pages strong { color: var(--w-brand-dark); } .pages h1 { font-size: 36px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 18px; } .pages h2 { font-size: 30px; line-height: 1.2; letter-spacing: -0.01em; margin: 40px 0 18px; } .pages h3 { font-size: 22px; line-height: 1.3; font-weight: 600; margin: 24px 0 10px; } .pages p { font-size: 17px; line-height: 1.7; margin: 0 0 16px; } .pages strong { font-weight: 700; } @media (max-width: 768px) { .pages h1 { font-size: 30px; margin-bottom: 16px; } .pages h2 { font-size: 25px; margin: 32px 0 16px; } .pages h3 { font-size: 20px; margin: 22px 0 8px; } .pages p { font-size: 16px; line-height: 1.65; margin-bottom: 14px; } } /* ---------- 03-table-reset.css (verbatim) ---------- */ /* TABLE RESET Tables rendered inside article bodies. Lasso emits this markup; we only dress it. Uses --w-* tokens only — see 00-token-map.css. Never hardcode a hex here. CHANGELOG 2026-08-16 Extracted verbatim from the atlanta.com production build. */ table { margin: 32px 0; } table th, table td { border-color: var(--w-border) !important; padding: 8px 16px !important; } table td { color: var(--w-text-muted) !important; } table th { background: var(--w-brand-dark) !important; color: var(--w-white) !important; font-size: 13px !important; font-weight: bold !important; } table tbody tr:nth-child(even) td { background: var(--w-bg-alt) !important; } @media (max-width: 992px) { table { display: block !important; overflow-x: auto !important; border: 0 !important; } } @media (max-width: 768px) { .pages h1 { font-size: 30px; margin-bottom: 16px; } .pages h2 { font-size: 25px; margin: 32px 0 16px 0; } .pages h3 { font-size: 20px; margin: 22px 0 8px 0; } .pages p { font-size: 16px; line-height: 1.65; margin-bottom: 14px; } } /* ---------- 04-dropdown-sublist.css (verbatim) ---------- */ /* DROPDOWN SUBLIST WIDGET Collapsible sublist panel. Pairs with the scroll-lock logic in main.js. Lasso emits this markup; we only dress it. Uses --w-* tokens only — see 00-token-map.css. Never hardcode a hex here. CHANGELOG 2026-08-16 Extracted verbatim from the atlanta.com production build. */ /* Anchor for overlay so the panel doesn't push content down */ .col-gap:has(.dropdown-sublist):has(.bubbles-link), .cols:has(.dropdown-sublist):has(.bubbles-link) { position: relative; margin-bottom: 32px; } /* Trigger button/bar */ .item-sublist:has(.bubbles-link) .dropdown-sublist { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--w-brand-dark); color: var(--w-white); border-radius: var(--w-radius); cursor: pointer; user-select: none; font-size: 14px; font-weight: 700; letter-spacing: 0.3px; transition: background 0.2s, box-shadow 0.2s; box-shadow: var(--w-shadow); max-width: 800px; margin-left: auto; margin-right: auto; } .item-sublist:has(.bubbles-link) .dropdown-sublist :hover { background: var(--w-brand-dark-2); box-shadow: var(--w-shadow-md); } /* Circular icon button with chevron */ .item-sublist:has(.bubbles-link) .dropdown-sublist::after { content: ''; display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background-color: var(--w-highlight); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%231A2E4A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 60%; background-position: center; transition: transform 0.25s ease, background-color 0.2s; } /* Open state — stays in place; JS locks page scroll */ .item-sublist:has(.bubbles-link) .dropdown-sublist.open { background: var(--w-brand-dark-2); border-radius: var(--w-radius) var(--w-radius) 0 0; z-index: 160; } .item-sublist:has(.bubbles-link) .dropdown-sublist.open::after { transform: rotate(180deg); background-color: var(--w-highlight); } /* Panel: scrollable within itself, max-height so trigger is always visible */ .item-sublist:has(.bubbles-link) .dropdown-sublist + * { position: absolute; left: max(0px, calc(50% - 400px)); right: max(0px, calc(50% - 400px)); z-index: 150; background: var(--w-white); border: 1px solid var(--w-border); border-top: 1px solid var(--w-bg-alt); border-radius: 0 0 var(--w-radius) var(--w-radius); box-shadow: var(--w-shadow-md); padding: 4px 12px 8px; overflow-x: hidden; overflow-y: auto; max-height: 65vh; } /* ---------- 05-contact-form.css (verbatim) ---------- */ /* CONTACT US FORM #contact-form on the contact page. Lasso emits this markup; we only dress it. Uses --w-* tokens only — see 00-token-map.css. Never hardcode a hex here. CHANGELOG 2026-08-16 Extracted verbatim from the atlanta.com production build. */ #contact-form { margin: 45px auto 0; max-width: 500px; } #contact-form input, #contact-form textarea { flex: 1; border: 2px solid var(--bs-gray-300); border-radius: 6px; outline: 0; padding: 14px 18px; font-size: 14px; color: var(--w-brand-dark); min-width: 100%; } #contact-form input:active, #contact-form input:focus, #contact-form textarea:active, #contact-form textarea:focus { border: 2px solid var(--w-brand); } #contact-form input::placeholder, #contact-form textarea::placeholder { color: var(--bs-gray-600); } #contact-form button { background: var(--w-brand); border: none; border-radius: 10px; cursor: pointer; padding: 16px; color: #fff; font-size: 13px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; transition: background 0.2s; white-space: nowrap; width: 100%; } #contact-form button:hover { background: var(--w-brand-dark); } /* ---------- 06-widgets.css (verbatim) ---------- */ /* CORE WIDGETS item-current-image, item-sublist, item-bubbles, sublist.card. Lasso emits this markup; we only dress it. Uses --w-* tokens only — see 00-token-map.css. Never hardcode a hex here. CHANGELOG 2026-08-16 Extracted verbatim from the atlanta.com production build. */ /* IMAGE STYLE RESET */ .item-current-image img { aspect-ratio: 4 / 3; width: 100%; height: auto; object-fit: cover; box-shadow: none !important; border-radius: 4px !important; border-color: var(--bs-gray-300) !important; max-width: 600px; margin: 0 auto; display: block; } .item-html, .item-paragraph { max-width: 800px; margin: 0 auto; } /* SUBLIST */ .item-sublist a { width: 100%; height: 100%; } .item.item-bubbles { margin-bottom: 32px; } .item-bubbles .row { margin: 0; } .bubbles-chip { align-items: center; background: var(--w-white); border: 1px solid var(--w-border); border-radius: 12px; color: var(--w-brand-dark); display: flex; font-weight: 500; height: 100%; padding: 16px 48px 16px 24px; position: relative; transition: padding 0.2s ease-in-out; } .bubbles-chip:hover { color: var(--w-brand-dark); background: var(--w-bg-tint); border-color: var(--w-brand); padding-left: 20px; } .bubbles-chip:active, .bubbles-chip:focus { background: var(--w-brand-dark-2); color: var(--w-white); } .bubbles-link { display: block; width: 100%; max-width: 100%; text-decoration: none; } .bubbles-link .bubbles-outer { height: 100%; padding: 5px; max-width: 100%; } .sibling.link-button .bubbles-link .bubbles-outer, .sibling.link-button .bubbles-chip { height: auto; } .col-gap:has(> .item-bubbles)::before { display: none !important; } .bubbles-chip::after { content: url("data:image/svg+xml,%3Csvg width='13' height='12' viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.87771 7.01782H1.02042C0.737361 7.01782 0.496528 6.91886 0.297917 6.72094C0.0993056 6.52317 0 6.2833 0 6.00136C0 5.71942 0.0993056 5.4781 0.297917 5.2774C0.496528 5.07657 0.737361 4.97615 1.02042 4.97615H8.87771L5.66583 1.76428C5.46111 1.55955 5.35681 1.31719 5.35292 1.03719C5.34889 0.757332 5.45076 0.510249 5.65854 0.295943C5.86632 0.0948319 6.11014 -0.00377823 6.39 0.000110661C6.66986 0.00399955 6.91236 0.108583 7.1175 0.313861L12.0713 5.27407C12.1699 5.37282 12.2464 5.4856 12.3008 5.6124C12.3551 5.73935 12.3823 5.86865 12.3823 6.00032C12.3823 6.13199 12.3551 6.26122 12.3008 6.38803C12.2464 6.51497 12.1727 6.62497 12.0798 6.71803L7.10958 11.688C6.89403 11.9037 6.65368 12.0081 6.38854 12.0012C6.12354 11.9942 5.88715 11.8862 5.67938 11.6772C5.4716 11.4629 5.36771 11.2166 5.36771 10.9382C5.36771 10.6599 5.4716 10.4192 5.67938 10.2162L8.87771 7.01782Z' fill='%231570B5'/%3E%3C/svg%3E%0A"); position: absolute; right: 16px; top: 50%; transform: translateY(-50%); transition: 0.2s ease-in-out; } .bubbles-chip:hover::after { right: 10px; } /* SUBLIST CARDS */ .item-sublist:has(.sublist.card) .row > div { padding: 5px !important; } .sublist.card { border: none; border-radius: 6px; box-shadow: var(--w-shadow-2); transition: 0.2s ease-in; } .sublist.card:hover { box-shadow: var(--w-shadow-3); color: var(--w-brand); transform: translateY(-4px); } .sublist.card h5 { margin-bottom: 0; font-weight: 500; } .sublist.card .card-body { padding: 16px; } @media (max-width: 767.98px) { .row div:has(> .sublist.card) { padding: 0 !important; } .row:has(> div .sublist.card) { margin: 0; gap: 10px; } .sublist.card { display: flex; flex-direction: row; align-items: center; } .sublist.card .card-img-top { border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width))); width: 120px; height: 90px; object-fit: cover; flex-shrink: 0; } .sublist.card .card-body { flex: 1; padding: 1rem; } .sublist.card .card-body * { line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .sublist.card .card-body h5 { font-size: 16px; } } /* ---------- 07-widget-behaviors.css (verbatim) ---------- */ /* WIDGET & SECTION BEHAVIORS Cross-widget responsive behaviour. Lasso emits this markup; we only dress it. Uses --w-* tokens only — see 00-token-map.css. Never hardcode a hex here. CHANGELOG 2026-08-16 Extracted verbatim from the atlanta.com production build. */ @media (max-width: 991px) { .cols:has(.sidebar-desktop){ display:none; } } /* ---------- 08-widget-min-heights.css (verbatim) ---------- */ /* WIDGET MIN-HEIGHTS CLS guards. Values are measured, not designed — do not round them. Lasso emits this markup; we only dress it. Uses --w-* tokens only — see 00-token-map.css. Never hardcode a hex here. CHANGELOG 2026-08-16 Extracted verbatim from the atlanta.com production build. */ .loco-widget { min-height: 672.547px; } .item-external-scripts { min-height: 566px; } @media (max-width: 767.98px) { .loco-widget { min-height: 1568px; } .item-external-scripts { min-height: 716px; } }