/* ========================================================================== Pay Attention Labs — payattnlabs.com Built on the Foundation Software brand style guide (Crystal Armstrong, 2023): Montserrat / Helvetica Neue, #0B7FC2 · #ACCEED · #FCD602 · #FDE976 · #EEEFEF · #101010 ========================================================================== */ /* --- 1. Tokens ----------------------------------------------------------- */ :root { --blue: #0B7FC2; --blue-dark: #0a6ea8; --blue-light: #ACCEED; --yellow: #FCD602; --yellow-light: #FDE976; --grey: #EEEFEF; --black: #101010; --white: #ffffff; /* sampled from the illustration artwork so panel grounds match exactly */ --illo-blue: #acd0ee; --illo-yellow: #fce78d; --ink: #2b2b2b; --ink-soft: #3a3a3a; --ink-mute: #7a7a7a; --on-dark: #e6e6e6; --on-dark-mute: #a8a8a8; --hairline: #e2e3e3; --rule-dark: #333333; --font-head: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif; --r-sm: 3px; --r-btn: 4px; --r-chip: 7px; --r-card: 20px; --r-panel: 24px; --maxw: 1240px; --gutter: clamp(20px, 5vw, 64px); --shadow-panel: 0 12px 34px rgba(16, 16, 16, 0.12); --shadow-studio: 0 14px 40px rgba(16, 16, 16, 0.16); --shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.4); /* the brand pattern: a dot grid over the light grey ground */ --dots: radial-gradient(#d5d7d7 1.4px, transparent 1.4px); --dots-size: 14px 14px; } /* --- 2. Base ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--white); color: var(--black); font-family: var(--font-body); font-size: 12pt; line-height: 1.6; text-wrap: pretty; overflow-x: hidden; } /* The public marketing page's original 16px base. Every proportion on that page -- its rem/em sizing, its clamp() scales, its line lengths -- was drawn against a 16px root and looks right at it, so it keeps that base while everything else moves to 12pt. The class is written onto by the marketing Layout itself (templarLayout.bodyClass -> Body::tag()), NOT by the Template: the marketing page and the signed-in shell are two Layouts of the SAME Template, so a Template-level setting would hit both and could never tell them apart. */ body.marketing { font-size: 16px; } a { color: var(--blue); text-decoration: none; } a:hover { color: var(--black); } img { max-width: 100%; } :where(a, button, input, textarea):focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } ::selection { background: var(--yellow-light); color: var(--black); } /* Site-wide heading styles -- the signed-in shell and every Templar admin screen. These three declarations are duplicated in the marketing rule below rather than shared through one selector, and the duplication is the point: the two must move independently, so restyling the site's headings can never disturb the public page. Don't "DRY" them back together. No margin here on purpose -- headings keep Bootstrap Reboot's own spacing, apart from h1. */ h1, h2, h3 { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.015em; } /* Breathing room under a page title; Reboot's 0.5rem isn't enough to separate it from the content. Overridden back to 0 on the marketing page by the rule below, which comes later at equal specificity. */ h1 { margin-bottom: 10px; } /* The marketing page's own heading styles -- what the rule above used to be, before it was scoped. It needed scoping because this file is served on the Templar admin screens too, so unscoped it reached every one of them, and its margin:0 is what left an admin page title flush against the content below it. Same leak, same fix as .btn/.card/.modal/.table/.panel further down. :where() rather than a plain "body.marketing h1", and this is not cosmetic. A bare descendant selector scores (0,1,2), which would outrank the single-class rules that style individual headings on that page -- .card__title's margin-bottom, .pal-offcanvas__header h2's letter-spacing -- and silently flatten them (six card titles lost their 12px gap when this was first written that way). :where() contributes zero specificity, so this lands at (0,0,1): identical to the unscoped rule it replaces, and every marketing-page override that won before still wins. Zero specificity also means source order alone separates it from the two rules above -- it must stay AFTER them, or the marketing page loses its margin:0. */ :where(body.marketing) h1, :where(body.marketing) h2, :where(body.marketing) h3 { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.015em; margin: 0; } /* --- 3. Layout primitives ------------------------------------------------ */ .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } /* The Template-level content container (templarTemplate.contentContainerClass). Deliberately NOT .wrap. .wrap clamps to --maxw and centres, which is why the footer sits well inside the masthead. The masthead has no max-width at all -- .nav is padding: 14px var(--gutter) -- so its brand and its menu sit exactly one gutter from each edge. Matching that means taking the same gutter and no max-width: almost full width, but never touching the edge. */ /* The site's full-bleed container: one gutter in from each edge, no max-width. This is what the masthead already does (.nav is padding: 14px var(--gutter)), so anything using it lines up exactly with the brand on the left and the menu on the right. .wrap is the OTHER container -- it clamps to --maxw and centres -- which is why the marketing footer sits well inside its own header. The signed-in chrome wants the aligned one throughout. */ .page-shell, .page-wrap { padding-inline: var(--gutter); } .page-shell { /* Breathing room between the content and the chrome above and below it. padding, not margin: .page-shell has no border and (without this) no block padding, so a vertical MARGIN here would collapse with the first and last child's own margins rather than adding to them. A page whose content opens with an

would get the h1's margin instead of this value, and a page opening with a flush-topped element would get the value -- the same rule producing different gaps depending on what the page happens to start with. Padding always adds. */ padding-block: 30px; /* Keeps the footer down the page on a short or empty page instead of riding up under the masthead. A minimum only -- taller content grows past it normally. */ min-height: 50vh; } .band { background: var(--white); } .band--dots { background-color: var(--grey); background-image: var(--dots); background-size: var(--dots-size); } .kicker { display: block; font-family: var(--font-head); font-weight: 700; font-size: 13px; letter-spacing: 0.26em; margin-bottom: 22px; } .kicker--yellow { color: var(--yellow); } .kicker--blue { color: var(--blue); } .section-title { font-size: clamp(27px, 3.3vw, 40px); line-height: 1.2; } .enquiry__copy h3 { font-size: 24pt; } .section-lede { font-size: 16px; line-height: 1.7; margin: 20px 0 0; } /* --- 4. Buttons ---------------------------------------------------------- */ /* Scoped to the marketing page: "btn" is a Bootstrap component name too, and the unscoped rule was overriding Bootstrap on every Templar admin screen. */ body.marketing .btn { display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1; border: 2px solid transparent; border-radius: var(--r-btn); padding: 14px 26px; cursor: pointer; transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease; } .btn--sm { font-size: 12px; padding: 11px 20px; } .btn--xs { font-size: 11.5px; padding: 11px 18px; } .btn--primary { background: var(--yellow); border-color: var(--yellow); color: var(--black); } .btn--primary:hover { background: var(--yellow-light); border-color: black; color: var(--black); } .btn--primary:active { background: #e8c400; border-color: #e8c400; } .btn--outline { background: transparent; border-color: var(--black); color: var(--black); } .btn--outline:hover { background: var(--black); color: var(--white); } /* Re-assert the outline on the marketing page. "body.marketing .btn" above sets the shorthand "border: 2px solid transparent" and outweighs the bare ".btn--outline" class, so the outline button's border-color was being painted transparent -- the button read as bare text. Matching that rule's specificity puts the black border back, hover included. */ body.marketing .btn--outline, body.marketing .btn--outline:hover { border-color: var(--black); } .btn--blue { background: var(--blue); border-color: var(--blue); color: var(--white); } /* "Find us on: [Discord]", carried over from payattn.com's masthead. That button is a yellow- outlined pill with the WHITE Discord mark, which works there because it sits on a black nav. The enquiry section here is white, so the pill brings its own dark ground rather than the mark being inverted -- Discord ships white, black and blurple marks and we only hold the white one, and recolouring a third party's logo is not ours to do. Same #FCD602 border, same invite. inline-flex so the mark and the word stay on one baseline with a real gap; the base "body.marketing .btn" sets the border shorthand AND display, both of which outrank a bare modifier class -- so this is scoped to match, the same fix .btn--outline needed. */ body.marketing .btn--discord { display: inline-flex; align-items: center; gap: 9px; background: var(--black); border-color: var(--yellow); color: var(--white); } /* Stays dark on hover on purpose: the mark is a white PNG, so a yellow fill would erase it. */ body.marketing .btn--discord:hover { background: var(--ink); border-color: var(--yellow-light); color: var(--white); } body.marketing .btn--discord img { height: 15px; width: auto; display: block; } /* The label and button sit below the ticks as the last thing in the left column, centred rather than left-aligned with the copy above. Centred on the TICKS measure, not the column. The column is 514px but the copy in it is ragged and narrower -- the ticks stop at 46ch -- so centring on the column put the row visibly right of where the eye reads the centre of the text. Sharing max-width with .ticks lines it up with the block directly above it and keeps them together if the copy reflows; a hardcoded nudge would not. */ .enquiry__discord { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 30px 0 0; max-width: 46ch; } /* A step above the ticks (14.5px/400) on both axes, deliberately a small one: this is a label for the button beside it, not a heading competing with the section title. */ .enquiry__discord span { font-size: 16px; font-weight: 600; color: var(--ink-soft); } .btn--blue:hover { background: var(--blue-dark); border-color: var(--blue-dark); color: var(--white); } .brand:hover .clr-white-to-yellow { color: var(--yellow); --text-color: var(--yellow); --shimmer-color: #ffffff; } .brand:hover .clr-yellow-to-white { color: var(--white); --text-color: var(--white); --shimmer-color: #9da3ad; } .brand_footer_wrapper { cursor: pointer; } .brand_footer_wrapper:hover .clr-white { color: var(--white); --text-color: var(--white); --shimmer-color: #9da3ad; } .clr-blue-to-yellow { color: var(--blue); --text-color: var(--blue); --shimmer-color: var(--yellow); } .brand_footer_wrapper:hover .clr-yellow-to-blue { color: var(--blue); --text-color: var(--blue); --shimmer-color: var(--white); } .brand_footer_wrapper:hover .shimmer-text { animation: brand-shimmer 900ms ease-out; } .clr-yellow-to-white, .clr-yellow-to-blue { color: var(--yellow); --text-color: var(--yellow); --shimmer-color: #ffffff; } .clr-white-to-yellow, .clr-white { color: var(--white); --text-color: var(--white); --shimmer-color: #9da3ad; } /* --- 5. Masthead --------------------------------------------------------- */ /* nav.nav, not .nav: "nav" is also a Bootstrap component, and the site masthead was claiming every one of them. The Templar admin screens build their section menus as
, so each inherited this rule's black background and gutter padding -- the black panel of blue links on the Edit Template form. The masthead is a