/* Nello Olivo Winery — one stylesheet for every page. Deliberately no build step: this is plain CSS served as-is, same spirit as the sibling sites in this repo, but shared across pages instead of copied into each. */ /* ───────────── TOKENS ───────────── */ /* Palette sampled directly off charleskrug.com: #ECE5D9 cream ground #D4B68E gold on dark (their "Join Us" tan) #F6F1E7 raised cream #8E7048 deep gold on cream (Add to Cart) #000 black backfill #161616 soft black Cream is the DEFAULT ground here; .dark is the backfill, not the base. */ :root{ --paper:#FDFCF9; /* near-white with the faintest warmth, the real base */ --paper-2:#FFFFFF; /* product / card ground, pure white */ --paper-3:#F5EFE4; /* warm cream, tint bands only */ --black:#000000; --black-2:#161616; --gold-lo:#D4B68E; /* on dark grounds */ --gold-hi:#8C6F47; /* on cream grounds, 4.57:1 (WCAG AA body text) */ --wine:#5C1526; --ember:#8C3A18; /* live tokens, dark by default. Nello ruled out white grounds entirely, so the base set IS the dark set and .dark sections become harmless no-ops. One flip here restyles the footer and every unclassed section on all 34 pages; nothing was edited per page. */ --ink:var(--black); /* ground */ --ink-2:var(--black-2); /* raised */ --ink-3:#1D1B1A; /* card */ --cream:#F2EAD9; /* text */ --dim:#9C8E7C; --gold:var(--gold-lo); --ember:#C2703A; --line:rgba(242,234,217,.15); --line-2:rgba(242,234,217,.30); /* Charles Krug's measured type system: Radley for display, Montserrat Light for everything else. His own logo artwork carries the wordmark, so no brand face is needed for the name itself. */ --brand:"Radley",Georgia,serif; --display:"Radley",Georgia,serif; --body:"Montserrat",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; --label:"Montserrat",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; --gut:clamp(20px,5vw,72px); --maxw:1320px; --ease:cubic-bezier(.22,.61,.36,1); --ann:42px; /* announcement bar height, header and hero offset from it */ } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ background:var(--ink);color:var(--cream); /* Krug runs Montserrat Light at 14.4px. Nudged up slightly for readability. */ font-family:var(--body);font-weight:300;font-size:clamp(15px,1.05vw,16.5px);line-height:1.85; -webkit-font-smoothing:antialiased; /* clip, NOT hidden. overflow-x:hidden makes its own scroll container, so the document ends up with two competing scrollers and wheel scrolling stalls. clip stops the horizontal overflow without creating a scroll box at all. */ overflow-x:clip; } ::selection{background:var(--wine);color:var(--cream)} img,video{display:block;max-width:100%} a{color:inherit} /* film grain over everything */ body::after{ content:"";position:fixed;inset:-50%;z-index:9999;pointer-events:none; opacity:.16;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grain 700ms steps(1) infinite; } @keyframes grain{ 0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,1%)}100%{transform:translate(0,0)} } .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)} /* ───────────── SHARED TYPE ───────────── */ /* letterspaced serif caps, not a sans. This single rule is most of the Antica feel. */ .label{ font-family:var(--label);font-weight:600;font-size:13px; letter-spacing:.28em;text-transform:uppercase;color:var(--gold); } .sec-head{margin-bottom:clamp(40px,5vw,72px)} .sec-head h2{ font-family:var(--display);font-weight:400; font-size:clamp(38px,5.6vw,76px);line-height:1.02;letter-spacing:-.015em;margin-top:18px; } .sec-head h2 em{font-style:italic;color:var(--ember)} .lede{max-width:56ch;color:var(--dim);margin-top:22px;font-size:1.06em} .rule{height:1px;background:var(--line);border:0} /* buttons */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:13px; /* Lighter than before. The weight, the tight tracking and the hard square corners together made these read as slabs; 500 with a touch more letter spacing, a hairline corner and taller, narrower proportions let them sit on the page rather than sitting on top of it. */ font-family:var(--label);font-weight:500;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase; text-decoration:none;color:var(--cream); border:1px solid var(--line-2);border-radius:3px; padding:18px 38px;background:transparent;position:relative;overflow:hidden; transition:color .45s var(--ease),border-color .45s var(--ease), box-shadow .45s var(--ease),transform .45s var(--ease); } .btn:hover{transform:translateY(-1px)} .btn:active{transform:translateY(0)} .btn::before{ content:"";position:absolute;inset:0;background:var(--cream);z-index:-1; transform:translateY(101%);transition:transform .45s var(--ease); } .btn:hover{color:var(--ink);border-color:var(--cream)} .btn:hover::before{transform:translateY(0)} /* The filled one was the blockiest of the set: a solid maroon rectangle with no edge. Softening the corner and lifting it on a shadow instead of a hard fill edge gives it weight without the slab. */ .btn.solid{ background:var(--wine);border-color:var(--wine); box-shadow:0 1px 2px rgba(60,14,24,.28), 0 8px 22px -10px rgba(60,14,24,.55); } .btn.solid:hover{box-shadow:0 2px 4px rgba(60,14,24,.32), 0 14px 30px -12px rgba(60,14,24,.6)} .btn.solid:hover{color:var(--ink)} .btn .arw{transition:transform .45s var(--ease)} .btn:hover .arw{transform:translateX(5px)} /* ───────────── ANNOUNCEMENT BAR ───────────── */ .announce{ /* A thin strip, like theirs: it announces, it does not take up residence. */ position:fixed;top:0;left:0;right:0;z-index:120;height:var(--ann); display:flex;align-items:center;justify-content:center;gap:14px; padding:0 44px 0 20px;color:#EFE7D8; background:var(--black);border-bottom:0; /* The display face here too, so the top of every page is set in one voice. A 600-weight sans was shouting; Radley at this size is just as legible and considerably better mannered. */ font-family:var(--display);font-weight:400;font-size:15.5px;letter-spacing:.02em; transition:opacity .5s var(--ease),transform .5s var(--ease),background .5s var(--ease); } .announce p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0} /* Two colours, as Krug does it: the sentence in cream, the action in gold with a rule under it, so the clickable half is obvious without a button. */ .announce a{color:var(--gold-lo);text-decoration:none;border-bottom:1px solid rgba(212,182,142,.7); white-space:nowrap;padding-bottom:1px;transition:color .3s var(--ease),border-color .3s var(--ease)} .announce a:hover{color:#F6E9CE;border-color:#F6E9CE} .announce .x{ position:absolute;right:10px;top:50%;transform:translateY(-50%); background:none;border:0;color:inherit;opacity:.55;cursor:pointer; font-size:15px;line-height:1;padding:8px; } .announce .x:hover{opacity:1} body.ann-off{--ann:0px} body.ann-off .announce{display:none} /* ───────────── HEADER ───────────── */ /* Three columns: icon rail, centred script mark, account rail. The mark only fades in once you scroll past the hero, so the logo never doubles up. */ #hdr{ position:fixed;top:var(--ann);left:0;right:0;z-index:100; padding:15px 0;border-bottom:1px solid transparent; background:var(--black);color:#F2EAD9; transition:background .5s var(--ease),padding .5s var(--ease),border-color .5s var(--ease), top .3s var(--ease),opacity .5s var(--ease),transform .5s var(--ease); } #hdr::before{content:none} #hdr.stuck{padding:9px 0} #hdr.stuck::before{opacity:0} /* ── top furniture over the hero ───────────────────────────────────────────── Set the way Krug set theirs: the announcement strip keeps its solid black at every scroll position, and only the header below it opens up over the film. The strip is the one hard edge at the top of the page, and having it there is what lets the header be soft, because the eye reads the two together as one piece of furniture rather than as a band floating on the video. .at-top is only ever set on hover-capable pointers (see site.js), so a phone or tablet keeps the ordinary solid bar and never has to discover a hidden one. Keyboard users are covered by :focus-within, which fires before the pointer rules and outranks them, so tabbing into the page always shows the nav. */ body.at-top #hdr{background:transparent} /* Frost, not fill. A solid panel is what she kept rejecting and a bare gradient still had to be dark enough to carry the type on its own. Blurring the film behind the bar does most of the work instead: it flattens out the blown sky and the tree detail that the letters were competing with, so the tint over it can stay light and the type can stay at its normal weight. Cream on the brightest frames measures 0.79:1 bare, which is unreadable, and is what forced the pure white at 600 this replaces. Frosted it composites to about 6:1 at the height the labels sit, and the gold marks to 4:1. It runs on a pseudo-element that overhangs the bar rather than on the bar itself, and the mask fades the blur out along with the tint. That matters: backdrop-filter alone stops dead at its box edge, which is exactly the hard band she has rejected every time it has appeared. Masked, the frost dissolves into the film and there is no edge anywhere to see. */ body.at-top #hdr::before{ content:"";position:absolute;left:0;right:0;top:0;height:calc(100% + 76px); z-index:-1;pointer-events:none; backdrop-filter:blur(16px) saturate(118%); -webkit-backdrop-filter:blur(16px) saturate(118%); background:linear-gradient(to bottom, rgba(8,8,9,.80) 0%, rgba(8,8,9,.62) 30%, rgba(8,8,9,.38) 55%, rgba(8,8,9,.15) 80%, rgba(8,8,9,0) 100%); -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 34%,rgba(0,0,0,.45) 68%,transparent 100%); mask-image:linear-gradient(to bottom,#000 0%,#000 34%,rgba(0,0,0,.45) 68%,transparent 100%); } /* Without backdrop-filter the frost cannot happen, so the tint has to carry the contrast by itself and goes back up to where the plain scrim had it. */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ body.at-top #hdr::before{ background:linear-gradient(to bottom, rgba(8,8,9,.92) 0%, rgba(8,8,9,.74) 30%, rgba(8,8,9,.46) 55%, rgba(8,8,9,.18) 80%, rgba(8,8,9,0) 100%); } } /* The scrim carries the contrast now, so the halo only has to catch the worst frames. The old setting stacked three shadows and pushed the labels to pure white at 600, which lit the rail up like a toolbar; this is one soft shadow under warm cream at the same weight the rest of the site is set in. */ body.at-top .ico{ opacity:1;color:#EDE3D0; text-shadow:0 1px 3px rgba(0,0,0,.8), 0 0 10px rgba(0,0,0,.45); } body.at-top .ico svg{stroke-width:1.4} body.at-top .ico .bars i{height:1.5px} /* body.at-top .ico outranks .ico:hover on specificity, so the hover colour has to be restated at the same weight or the rail goes dead over the hero. */ body.at-top .ico:hover,body.at-top .ico:focus-visible{color:#F8EDD6} /* The gold mark sits on the film with nothing behind it, so it is lifted well above its printed value to hold against the sunlit rows. */ body.at-top .hmark img{ filter:brightness(1.5) saturate(1.05) drop-shadow(0 1px 2px rgba(0,0,0,.92)) drop-shadow(0 0 6px rgba(0,0,0,.6)); } /* This used to hold the bar 34px down once the strip was dismissed, so the icons would stay where they had always been. That was the wrong trade: it left a band of film showing above the bar and the whole thing read as floating loose rather than sitting on the top edge. With the strip gone the bar goes to the top, which is where a bar belongs. */ .hrow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px} .rail{display:flex;align-items:center;gap:clamp(12px,2.2vw,32px)} .rail.right{justify-self:end} .ico{ /* Icon and word on one line, the way Krug sets theirs. Stacked, the word sat under the glyph and the whole rail read as a phone tab bar; inline it reads as a line of type that happens to carry a mark. */ display:flex;flex-direction:row;align-items:center;gap:9px; background:none;border:0;padding:0;cursor:pointer;text-decoration:none;color:#F2EAD9; /* Set in Radley, the display face, rather than the utility sans. The icons are drawn in fine 1.25px strokes and a heavy uppercase sans underneath them read as a toolbar; a light serif with generous tracking sits with the script mark in the middle and lets the whole bar read as one piece of typography. */ font-family:var(--display);font-weight:400;font-size:12.5px;letter-spacing:.26em;text-transform:uppercase; opacity:.88;transition:opacity .3s var(--ease),color .3s var(--ease); } .ico:hover{opacity:1;color:var(--gold-lo)} /* ── his tracks, in his own palette ────────────────────────────────────────── The native