/* CC-Global.css */ /* Body offset for fixed navigation */ body { padding-top: 75px !important; } .wrapper { float: none !important; } @media screen and (max-width: 1024px) { body { padding-top: 48px !important; } } /* Font slots --------------------------------------------------------------------------- FOUR physical slots. The family names below are fixed kit vocabulary and are never edited - no rule anywhere names them directly. A reskin swaps the FILES in /font/ and points the ROLE TOKENS in 01-CC-Brand.css at whichever slots it needs; every rule in the kit uses var(--font-body|bold|display|accent). woff2 is listed first and ttf second, so a client may hand over either format and the browser takes the first it understands. A slot no role token names is never downloaded, so an unused slot costs nothing and its files may simply be absent - which is how a two-face client works (point --font-bold at the same family as --font-body rather than shipping a duplicate font). slot intended role files citrfontreg body / running text font/body.woff2 | body.ttf citrfontbold bold + semantic headings font/bold.woff2 | bold.ttf citrfontboldalt editorial display face font/display.woff2 | display.ttf citrfontaccent optional fourth face font/accent.woff2 | accent.ttf `font-weight: normal !important` is load-bearing on all four: these are single-weight files, and without it the browser synthesises a fake bold on any element that also carries a font-weight. Do not remove it. */ @font-face { font-family: 'citrfontreg'; src: url('/sitespecific/customcontent/font/body.woff2') format('woff2'), url('/sitespecific/customcontent/font/body.ttf') format('truetype'); font-weight: normal !important; font-style: normal; } @font-face { font-family: 'citrfontbold'; src: url('/sitespecific/customcontent/font/bold.woff2') format('woff2'), url('/sitespecific/customcontent/font/bold.ttf') format('truetype'); font-weight: normal !important; font-style: normal; } @font-face { font-family: 'citrfontboldalt'; src: url('/sitespecific/customcontent/font/display.woff2') format('woff2'), url('/sitespecific/customcontent/font/display.ttf') format('truetype'); font-weight: normal !important; font-style: normal; } @font-face { font-family: 'citrfontaccent'; src: url('/sitespecific/customcontent/font/accent.woff2') format('woff2'), url('/sitespecific/customcontent/font/accent.ttf') format('truetype'); font-weight: normal !important; font-style: normal; } /* Full-width overrides */ .fixed, .NodeLevel0 > .CSSFacetNavModules { max-width: var(--global-NavFooterWidth) !important; } /* Page container --------------------------------------------------------------------------- One optional wrapper that holds a run of homepage stripes to a maximum measure and centres it. The kit's default page is edge to edge: every stripe is full-bleed and takes its own horizontal inset from --gutter. A design that sits on a fixed measure instead wraps that run in
in default.aspx and sets --container-maxWidth in 01. THE DEFAULTS ARE A NO-OP. --container-maxWidth is `none` and --container-gutter is 0, so the element is a transparent pass-through and adding the div changes nothing until a client sets a value. That is what makes it safe to carry in the page template and to copy onto a built site. The gutter defaults to 0 and NOT to --gutter deliberately. Stripes already apply --gutter to their own content, so a container that padded as well would inset the same text twice and the two insets would not stay in step. A client that wants the container to carry the inset instead sets it here and the stripes' own --gutter then measures from the container edge. A stripe that must stay full-bleed inside a contained page goes OUTSIDE the container: close the div before it and open a new one after. The absence of a breakout rule is deliberate. The usual `margin-inline: calc(50% - 50vw)` trick measures 100vw INCLUDING the scrollbar, so it overflows the page by the scrollbar width on every desktop browser that shows one. Splitting the container has no such failure mode and needs no CSS at all. */ .cc-container { max-width: var(--container-maxWidth); margin-inline: auto; padding-inline: var(--container-gutter); } /* Design Tokens Brand tokens (--brand, --brand-dark, --brand-accent, etc.) live in CC-Brand.css. That file must load before this one -- the oklch() derivations below depend on those variables. */ :root { /* Layout and Typography */ --global-NavFooterWidth: 100% !important; /* Spacing */ --global-padding: 1rem; --global-gap: 1rem; --global-margin: 1rem; /* Section rhythm -- the vertical tier every homepage stripe pads with. lg is the standard gap between stripes; sm is the tightened variant for a stripe that opens hard against the one above it, rather than sitting in its own air. Named no stripe on purpose: this is a framework file. */ --section-padding-lg: 5rem; --section-padding-sm: 3rem; --text-wrap: 1.25rem; --text-block-wrap: 1.875rem; /* Motion */ --global-transition: 0.3s ease; /* Font scale ----------------------------------------------------------------------- The small end (xs..md) is PINNED: flat sizes on every viewport, because body copy, labels and inputs want a constant reading size, not one that shrinks with the window. They stay in rem so user zoom still scales them (1rem = 16px at the default root size). The display end (mdl..3xl) is FLUID. Each ramp hits its floor at a 375px viewport and its ceiling at 1440px, and every ceiling is the size this scale used to be pinned at - so nothing changes at 1440px and wider, and below that headings come down to something a phone can hold instead of staying at a flat 48px. The middles are written `rem + vw`, never bare `vw`. A bare-vw middle ignores the user's font size and breaks browser zoom; the rem term keeps zoom working. mdl is a new step. The scale used to jump straight from 1rem to 2rem with nothing in between, so any sub-heading either shouted or sat at body size and bands invented their own one-off values to cope. */ --fontSize-xs: 0.825rem; --fontSize-sm: 0.875rem; --fontSize-base: 0.925rem; --fontSize-md: 1rem; --fontSize-mdl: clamp(1.15rem, 1.027rem + 0.526vw, 1.5rem); --fontSize-lg: clamp(1.5rem, 1.324rem + 0.751vw, 2rem); --fontSize-xl: clamp(1.65rem, 1.439rem + 0.901vw, 2.25rem); --fontSize-2xl: clamp(1.8rem, 1.554rem + 1.052vw, 2.5rem); --fontSize-3xl: clamp(2rem, 1.648rem + 1.502vw, 3rem); /* Heading face -- read by the h1-h6 rule further down. Defaults to --font-bold, so a file that never sets it renders exactly as it did when that rule named --font-bold directly. It exists so the two jobs --font-bold used to do can come apart. That one role carried both semantic headings AND bold UI emphasis - nav links, prices, stock labels, form labels, button text - so there was no way to ask for a regular-weight interface while keeping headings bold. Now --font-heading serves the headings and --font-bold serves the emphasis, and 01 repoints either without disturbing the other. The default is deliberately var(--font-bold) rather than a slot name: it keeps the token invisible until a client wants the split, and a site whose 01 predates the token needs no edit to keep its current headings. */ --font-heading: var(--font-bold); /* Content gutter -- the inline padding every full-bleed stripe holds its text off the viewport edge with. This exact clamp was repeated verbatim in eight places in CC-Home.css; it is one token now so the stripes cannot drift apart. */ --gutter: clamp(1.25rem, 2.8vw, 3rem); /* Page container -- read by the .cc-container rule above, which is where the reasoning lives. Both values are a no-op by design: `none` leaves the wrapper full-width, and 0 leaves the horizontal inset to the stripes themselves, so a page that carries the div but sets neither renders exactly as it did before. Set --container-maxWidth in 01 to hold the homepage to a measure. */ --container-maxWidth: none; --container-gutter: 0; /* Auto-derived -- no need to touch for a reskin */ /* Brand shades -- each base token gets -light and -dark only. --brand-dark is a base reskin token (CC-Brand.css), so --brand has only a -light shade here. */ --brand-light: oklch(from var(--brand) calc(l + 0.1) c h); --brand-accent-light: oklch(from var(--brand-accent) calc(l + 0.05) c h); --brand-accent-dark: oklch(from var(--brand-accent) calc(l - 0.05) c h); --brand-link-light: oklch(from var(--brand-link) calc(l + 0.05) c h); --brand-link-dark: oklch(from var(--brand-link) calc(l - 0.05) c h); --brand-focus-light: oklch(from var(--brand-focus) calc(l + 0.05) c h); --brand-focus-dark: oklch(from var(--brand-focus) calc(l - 0.05) c h); --sale-light: oklch(from var(--sale) calc(l + 0.1) c h); --sale-dark: oklch(from var(--sale) calc(l - 0.1) c h); /* Background variants */ --background-sunken: oklch(from var(--background-raised) calc(l - 0.03) c h); --background-overlay: oklch(from var(--brand) l c h / 0.04); --background-input: oklch(from var(--background-raised) calc(l + 0.01) c h); --background-inverse: var(--brand); --background-inverse-raised: var(--brand-dark); /* Text hierarchy */ --text-secondary: oklch(from var(--text) calc(l + 0.25) c h); --text-muted: oklch(from var(--text) calc(l + 0.35) c h); --text-subtle: oklch(from var(--text) calc(l + 0.5) c h); --text-link: var(--brand-link); /* Borders */ --border: oklch(from var(--text) calc(l + 0.6) c h); --border-light: oklch(from var(--text) calc(l + 0.7) c h); --border-subtle: oklch(from var(--text) calc(l + 0.8) c h); --border-brand: var(--brand-accent); /* Opacity variants */ --white-90: oklch(from var(--text-inverse) l c h / 0.9); --white-60: oklch(from var(--text-inverse) l c h / 0.6); --white-55: oklch(from var(--text-inverse) l c h / 0.55); --white-30: oklch(from var(--text-inverse) l c h / 0.3); --black-80: oklch(from var(--text) l c h / 0.82); --black-65: oklch(from var(--text) l c h / 0.65); --black-50: oklch(from var(--text) l c h / 0.5); --black-10: oklch(from var(--text) l c h / 0.1); --black-05: oklch(from var(--text) l c h / 0.05); /* Overlays and gradients */ --overlay-dark: oklch(from #252525 l c h / 0.82); --overlay-medium: oklch(from #252525 l c h / 0.65); --overlay-light: oklch(from #252525 l c h / 0.4); --gradient-brand: var(--brand-accent); --gradient-dark: linear-gradient(0deg, var(--brand), var(--brand-dark)); --gradient-dark-reverse: linear-gradient(0deg, var(--brand-dark), var(--brand)); --gradient-overlay-bottom: linear-gradient(0deg, var(--overlay-dark), transparent 70%); --gradient-overlay-left: linear-gradient(90deg, var(--overlay-dark), transparent 70%); --gradient-overlay-diagonal: linear-gradient(45deg, var(--overlay-dark), transparent 60%); /* Shadows */ --shadow-sm: 0 2px 4px var(--black-05); --shadow-md: 0 4px 6px var(--black-10); --shadow-lg: 0 10px 15px oklch(from var(--text) l c h / 0.15); /* Status colors -- functional, not brand */ --status-out-of-stock: #e74c3c; --status-out-of-stock-dark: oklch(from #e74c3c calc(l - 0.05) c h); --status-special-order: #f39c12; --status-special-order-dark: oklch(from #f39c12 calc(l - 0.08) c h); --status-coming-soon: #3498db; --status-coming-soon-dark: oklch(from #3498db calc(l - 0.05) c h); } /* Scrollbar */ ::-webkit-scrollbar { -webkit-appearance: none; width: 7px; height: 7px; -webkit-overflow-scrolling: auto; } ::-webkit-scrollbar-thumb { border-radius: var(--global-radius); background-color: var(--brand-focus-light); -webkit-box-shadow: 0 0 1px var(--brand-focus-dark); } /* Base Typography */ html, body { font-family: var(--font-body); font-weight: 400; font-style: normal; font-size: var(--fontSize-base); color: var(--text); /* The page canvas, painted explicitly so nothing leaks through between full-bleed stripes. Was a hardcoded #fff here with a client layer overriding it to the token - the token is the whole point, so it belongs here. A client with a warm or dark canvas now only sets --background. */ background: var(--background); } @media screen and (min-width: 768px) and (max-width: 1024px) { body { padding-top: 48px !important; } } /* The only rule in the kit that paints a heading face. Everything else that wants weight names --font-bold, which is emphasis, not headings. */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .current, .bannerTitle, .mainFont, .ctaTitle, .boldfont { font-family: var(--font-heading); font-weight: 300; font-style: normal; } /* Disable empty-href links */ a[href=""] { pointer-events: none; cursor: default; text-decoration: none; } /* Grid Row System */ [class*="grirow"] > div > a { position: relative; width: 100%; height: 100%; } [class*="grirow"] > div { display: grid; } .grirow1 > div { grid-template-columns: repeat(1, 1fr); } .grirow2 > div { grid-template-columns: repeat(2, 1fr); } .grirow3 > div { grid-template-columns: repeat(3, 1fr); } .grirow4 > div { grid-template-columns: repeat(4, 1fr); } .grirow5 > div { grid-template-columns: repeat(5, 1fr); } .grirow6 > div { grid-template-columns: repeat(6, 1fr); } .grirow7 > div { grid-template-columns: repeat(7, 1fr); } /* Grid: mobile */ @media screen and (max-width: 767.9px) { [class*="grirow"] > div { grid-template-columns: repeat(1, 1fr); } .grirow2 > div { grid-template-columns: repeat(1, 1fr); } .grirow4 > div { grid-template-columns: repeat(2, 1fr); } .grirow5 > div { grid-template-columns: repeat(2, 1fr); } .grirow6 > div { grid-template-columns: repeat(2, 1fr); } } /* Grid: tablet */ @media screen and (min-width: 768px) and (max-width: 1024px) { [class*="grirow"] > div { grid-template-columns: repeat(1, 1fr); } .grirow2 > div { grid-template-columns: repeat(1, 1fr); } .grirow4 > div { grid-template-columns: repeat(2, 1fr); } .grirow5 > div { grid-template-columns: repeat(2, 1fr); } .grirow6 > div { grid-template-columns: repeat(2, 1fr); } } /* Starbuys and Coupon Drawer */ .coupon-drawer-container[data-state="open"], .starbuy-drawer { z-index: 999999 !important; }