/* ========================================================================== Founder & CEO page — ramlit.com Scoped to .fnd-page. Every selector is namespaced .fnd-* so nothing here can be caught by responsive.css's range queries or the theme's own rules. Theme contract: on a first-ever visit carries NO data-theme, so dark is the base and light is the single override block at the bottom. ========================================================================== */ .fnd-page{ /* dark = base */ --fnd-bg: #141416; --fnd-bg-alt: #191919; --fnd-card: #1F1F23; --fnd-card-2: #26262B; --fnd-ink: #ffffff; --fnd-body: #BEBEBE; --fnd-muted: #95959C; /* 5.06:1 on the darkest card ground */ --fnd-rule: rgba(255,255,255,.10); --fnd-rule-2: rgba(255,255,255,.18); --fnd-accent: #B91202; /* solid fills only — white on it is 6.67:1 */ --fnd-accent-text: #E8664F; /* accent used AS TEXT/icons: 4.99:1 min on dark */ --fnd-accent-2: #9D0F02; --fnd-accent-ink: #ffffff; --fnd-accent-wash: rgba(185,18,2,.12); --fnd-ok: #4FA96B; /* own rhythm — .section-padding is dead CSS on this site, nothing is inherited */ --fnd-gap: 120px; --fnd-shell: 1320px; background: var(--fnd-bg); color: var(--fnd-body); font-family: 'Rubik', sans-serif; } /* ---------- shell + rhythm ---------------------------------------------- */ .fnd-shell{ width:100%; max-width:var(--fnd-shell); margin:0 auto; padding-left:15px; padding-right:15px; } .fnd-sec{ padding-top:var(--fnd-gap); padding-bottom:var(--fnd-gap); position:relative; } .fnd-sec--alt{ background:var(--fnd-bg-alt); } .fnd-sec--tight{ padding-top:calc(var(--fnd-gap) * .55); padding-bottom:calc(var(--fnd-gap) * .55); } /* ---------- type -------------------------------------------------------- */ .fnd-page h1,.fnd-page h2,.fnd-page h3,.fnd-page h4{ font-family:'Rajdhani', sans-serif; color:var(--fnd-ink); margin:0; line-height:1.14; text-wrap:balance; font-weight:700; } /* the site has zero h1 rules — this page ships its own */ .fnd-page h1.fnd-h1{ font-size:64px; line-height:1.06; letter-spacing:-.5px; } .fnd-page .fnd-h2{ font-size:44px; letter-spacing:-.2px; } .fnd-page .fnd-h3{ font-size:22px; font-weight:600; } .fnd-eyebrow{ display:inline-block; font-family:'Rubik',sans-serif; font-size:14px; font-weight:500; letter-spacing:3px; text-transform:uppercase; color:var(--fnd-accent-text); margin-bottom:16px; } .fnd-lede{ font-size:18px; line-height:1.72; color:var(--fnd-body); max-width:62ch; } .fnd-p{ font-size:16px; line-height:1.8; color:var(--fnd-body); margin:0 0 18px; } .fnd-p:last-child{ margin-bottom:0; } .fnd-measure{ max-width:62ch; } /* ---------- a11y: the theme kills focus globally, this page restores it --- */ .fnd-page a:focus-visible, .fnd-page button:focus-visible, .fnd-page input:focus-visible, .fnd-page textarea:focus-visible, .fnd-page summary:focus-visible{ outline:2px solid var(--fnd-accent-text) !important; outline-offset:3px !important; box-shadow:none !important; border-radius:2px; } .fnd-skip{ position:absolute; left:-9999px; top:0; z-index:999; /* literals, not tokens: this element sits outside .fnd-page */ background:#B91202; color:#fff; padding:12px 20px; font-weight:500; font-family:'Rubik',sans-serif; text-decoration:none; } .fnd-skip:focus{ left:0; } /* ---------- buttons ----------------------------------------------------- */ .fnd-btn{ display:inline-flex; align-items:center; gap:10px; font-family:'Rajdhani',sans-serif; font-weight:700; font-size:17px; letter-spacing:.6px; text-transform:uppercase; padding:16px 30px; border-radius:3px; border:1px solid transparent; text-decoration:none; transition:background .25s ease, border-color .25s ease, color .25s ease; } .fnd-btn--primary{ background:var(--fnd-accent); color:var(--fnd-accent-ink); } .fnd-btn--primary:hover{ background:var(--fnd-accent-2); color:var(--fnd-accent-ink); } .fnd-btn--ghost{ background:transparent; color:var(--fnd-ink); border-color:var(--fnd-rule-2); } .fnd-btn--ghost:hover{ border-color:var(--fnd-accent-text); color:var(--fnd-accent-text); } .fnd-btn i{ font-size:13px; } .fnd-btnrow{ display:flex; flex-wrap:wrap; gap:14px; } /* ---------- hero -------------------------------------------------------- */ .fnd-hero{ padding-top:172px; padding-bottom:96px; position:relative; overflow:hidden; } .fnd-hero__grid{ display:grid; grid-template-columns:1fr; gap:56px; align-items:center; } .fnd-hero__name{ font-family:'Rubik',sans-serif; font-size:15px; font-weight:500; letter-spacing:3px; text-transform:uppercase; color:var(--fnd-accent-text); margin:0 0 18px; } .fnd-hero__role{ font-size:19px; color:var(--fnd-body); margin:22px 0 0; } .fnd-hero__role b{ color:var(--fnd-ink); font-weight:500; } .fnd-hero__cta{ margin-top:38px; } .fnd-hero__media{ position:relative; } /* The source crop is 736x1250. Left uncapped it makes the hero taller than the viewport and pushes the primary CTA below the fold, so cap it and frame the face. */ .fnd-hero__img{ display:block; width:100%; height:auto; max-height:600px; object-fit:cover; object-position:52% 12%; border-radius:4px; border:1px solid var(--fnd-rule); background:var(--fnd-card); } /* ---------- stat strip -------------------------------------------------- */ .fnd-stats{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--fnd-rule); border:1px solid var(--fnd-rule); border-radius:4px; overflow:hidden; } .fnd-stat{ background:var(--fnd-card); padding:32px 28px; } .fnd-stat b{ display:block; font-family:'Rajdhani',sans-serif; font-size:38px; line-height:1; color:var(--fnd-ink); } .fnd-stat span{ display:block; margin-top:10px; font-size:14px; letter-spacing:.5px; color:var(--fnd-muted); } /* ---------- generic two-column ------------------------------------------ */ .fnd-2col{ display:grid; grid-template-columns:1fr; gap:44px; } .fnd-2col--wide{ gap:56px; } /* ---------- contrast pair (problem / outcome) --------------------------- */ .fnd-pair{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--fnd-rule); border:1px solid var(--fnd-rule); border-radius:4px; overflow:hidden; } .fnd-pair__side{ background:var(--fnd-card); padding:38px 34px; } .fnd-pair__side--out{ background:var(--fnd-card-2); } .fnd-pair__label{ font-size:13px; letter-spacing:2.4px; text-transform:uppercase; font-weight:500; color:var(--fnd-muted); margin:0 0 20px; display:block; } .fnd-pair__side--out .fnd-pair__label{ color:var(--fnd-accent-text); } .fnd-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; } .fnd-list li{ position:relative; padding-left:26px; font-size:16px; line-height:1.7; color:var(--fnd-body); } .fnd-list li::before{ content:''; position:absolute; left:0; top:11px; width:8px; height:8px; border-radius:50%; background:var(--fnd-accent-text); } .fnd-list--plain li::before{ background:var(--fnd-rule-2); } /* ---------- scope in/out ------------------------------------------------ */ .fnd-scope{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--fnd-rule); border:1px solid var(--fnd-rule); border-radius:4px; overflow:hidden; } .fnd-scope__col{ background:var(--fnd-card); padding:38px 34px; } .fnd-scope__col h3{ margin-bottom:22px; } .fnd-scope__note{ margin-top:26px; padding-top:20px; border-top:1px solid var(--fnd-rule); font-size:15px; color:var(--fnd-muted); } .fnd-scope__note a{ color:var(--fnd-accent-text); } /* ---------- capabilities ------------------------------------------------ */ .fnd-caps{ display:grid; grid-template-columns:1fr; gap:22px; margin-top:44px; align-items:start; } .fnd-cap{ background:var(--fnd-card); border:1px solid var(--fnd-rule); border-top:3px solid var(--fnd-accent); border-radius:4px; padding:32px 28px; } .fnd-cap__title{ margin-bottom:8px; } .fnd-cap__sub{ font-size:14px; color:var(--fnd-muted); margin:0 0 24px; line-height:1.6; } .fnd-cap__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:15px; } .fnd-cap__list li{ display:flex; align-items:flex-start; gap:14px; font-size:16px; line-height:1.55; color:var(--fnd-body); } .fnd-cap__ico{ flex:0 0 34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border-radius:3px; background:var(--fnd-accent-wash); color:var(--fnd-accent-text); font-size:15px; margin-top:-2px; } [data-theme="light-mode"] .fnd-page .fnd-cap__ico{ background:var(--fnd-accent-wash); color:var(--fnd-accent-text); } /* ---------- proof ------------------------------------------------------- */ .fnd-proof{ display:grid; grid-template-columns:1fr; gap:22px; } .fnd-review{ background:var(--fnd-card); border:1px solid var(--fnd-rule); border-radius:4px; padding:30px 28px; } .fnd-review__stars{ color:#F5A623; font-size:14px; letter-spacing:2px; margin-bottom:14px; } .fnd-review__text{ font-size:15px; line-height:1.8; color:var(--fnd-body); margin:0 0 20px; overflow-wrap:anywhere; } .fnd-review__who{ font-size:14px; color:var(--fnd-muted); } .fnd-review__who b{ color:var(--fnd-ink); font-weight:500; display:block; } .fnd-idlinks{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; } .fnd-idlinks a{ font-size:14px; padding:10px 16px; border:1px solid var(--fnd-rule-2); border-radius:3px; color:var(--fnd-body); text-decoration:none; transition:border-color .2s ease, color .2s ease; } .fnd-idlinks a:hover{ border-color:var(--fnd-accent-text); color:var(--fnd-accent-text); } /* ---------- objections (native details, zero JS dependency) ------------- */ .fnd-qa{ border-top:1px solid var(--fnd-rule); } .fnd-qa details{ border-bottom:1px solid var(--fnd-rule); } .fnd-qa summary{ cursor:pointer; list-style:none; padding:26px 44px 26px 0; position:relative; font-family:'Rajdhani',sans-serif; font-size:22px; font-weight:600; color:var(--fnd-ink); } .fnd-qa summary::-webkit-details-marker{ display:none; } .fnd-qa summary::after{ content:'+'; position:absolute; right:6px; top:50%; transform:translateY(-50%); font-size:26px; line-height:1; color:var(--fnd-accent-text); font-weight:400; } .fnd-qa details[open] summary::after{ content:'\2013'; } .fnd-qa__a{ padding:0 44px 28px 0; } /* ---------- close / form ------------------------------------------------ */ .fnd-form{ background:var(--fnd-card); border:1px solid var(--fnd-rule); border-radius:4px; padding:38px 34px; } .fnd-field{ margin-bottom:18px; } .fnd-form input[type=text], .fnd-form input[type=email], .fnd-form input[type=number], .fnd-form textarea{ width:100%; background:var(--fnd-bg); border:1px solid var(--fnd-rule-2); border-radius:3px; padding:14px 16px; color:var(--fnd-ink); font-family:'Rubik',sans-serif; font-size:15px; outline:none; transition:border-color .2s ease; } .fnd-form input::placeholder,.fnd-form textarea::placeholder{ color:var(--fnd-muted); } /* a state indicator, so it needs 3:1 — the solid accent is only 2.76:1 on dark */ .fnd-form input:focus,.fnd-form textarea:focus{ border-color:var(--fnd-accent-text); } .fnd-form textarea{ min-height:130px; resize:vertical; } .fnd-form label{ display:block; font-size:13px; letter-spacing:1.4px; text-transform:uppercase; color:var(--fnd-muted); margin-bottom:8px; } .fnd-captcha{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; background:var(--fnd-bg); border:1px solid var(--fnd-rule-2); border-radius:3px; padding:16px; } .fnd-captcha__q{ font-family:'Rajdhani',sans-serif; font-size:26px; font-weight:700; color:var(--fnd-ink); letter-spacing:1px; } .fnd-captcha input{ max-width:130px; } .fnd-form__submit{ width:100%; justify-content:center; border:none; cursor:pointer; margin-top:6px; } .fnd-next{ display:flex; flex-direction:column; gap:22px; } .fnd-next__item{ padding-left:22px; border-left:2px solid var(--fnd-accent); } .fnd-next__item b{ display:block; font-family:'Rajdhani',sans-serif; font-size:20px; color:var(--fnd-ink); margin-bottom:4px; } .fnd-next__item span{ font-size:15px; line-height:1.7; color:var(--fnd-body); } /* WhatsApp — the second path, for people who will not fill in a form. Deliberately not brand-green: it sits inside a red/dark page and a green button would out-shout the primary CTA. */ .fnd-wa{ margin-top:34px; padding-top:28px; border-top:1px solid var(--fnd-rule); } .fnd-wa__lead{ font-size:15px; color:var(--fnd-muted); margin:0 0 14px; } .fnd-wa__note{ font-size:14px; color:var(--fnd-muted); margin:12px 0 0; } .fnd-btn--wa{ background:transparent; color:var(--fnd-ink); border-color:var(--fnd-rule-2); } .fnd-btn--wa:hover{ border-color:#25D366; color:#25D366; } .fnd-btn--wa i{ font-size:19px; color:#25D366; } .fnd-hero__wa{ display:inline-flex; align-items:center; gap:8px; margin-top:20px; font-size:15px; color:var(--fnd-muted); text-decoration:none; } .fnd-hero__wa i{ color:#25D366; font-size:17px; } .fnd-hero__wa:hover{ color:var(--fnd-ink); } .fnd-hero__wa u{ text-decoration-color:var(--fnd-rule-2); text-underline-offset:3px; } .fnd-direct{ margin-top:30px; padding-top:24px; border-top:1px solid var(--fnd-rule); font-size:15px; color:var(--fnd-muted); } .fnd-direct a{ color:var(--fnd-accent-text); text-decoration:none; } .fnd-direct a:hover{ text-decoration:underline; } /* ========================================================================== LIGHT MODE — one override block. The theme redefines no --thm-* token, so every value this page uses has to be restated here. ========================================================================== */ [data-theme="light-mode"] .fnd-page{ --fnd-bg: #ffffff; --fnd-bg-alt: #f5f4fa; --fnd-card: #ffffff; --fnd-card-2: #f5f4fa; --fnd-ink: #141414; --fnd-body: #616670; --fnd-muted: #686C75; /* #7B7F88 was 4.01:1 on white — failed AA */ --fnd-rule: #e4e2ea; --fnd-rule-2: #cfcfd6; --fnd-accent: #B91202; --fnd-accent-text: #B91202; /* 6.67:1 on white — safe as text in light */ --fnd-accent-2: #9D0F02; --fnd-accent-wash: rgba(185,18,2,.07); } /* the theme paints all headings #141414 in light mode — fine here, but the hero name and eyebrow must stay accent-coloured, so re-pin them */ [data-theme="light-mode"] .fnd-page .fnd-hero__name, [data-theme="light-mode"] .fnd-page .fnd-eyebrow{ color:var(--fnd-accent-text); } [data-theme="light-mode"] .fnd-page .fnd-btn--primary{ color:#ffffff; } [data-theme="light-mode"] .fnd-page .fnd-hero__img{ background:var(--fnd-bg-alt); } /* ========================================================================== RESPONSIVE — this page owns its own breakpoints. responsive.css is range-scoped and stops at 1650px, so nothing here relies on it. ========================================================================== */ @media (min-width:768px){ .fnd-stats{ grid-template-columns:repeat(2,1fr); } .fnd-proof{ grid-template-columns:repeat(2,1fr); } .fnd-pair{ grid-template-columns:repeat(2,1fr); } .fnd-scope{ grid-template-columns:repeat(2,1fr); } } @media (min-width:768px){ .fnd-caps{ grid-template-columns:repeat(2,1fr); } } @media (min-width:992px){ .fnd-caps{ grid-template-columns:repeat(3,1fr); } .fnd-hero__grid{ grid-template-columns:1.15fr .85fr; gap:70px; } .fnd-2col{ grid-template-columns:repeat(2,1fr); } .fnd-stats{ grid-template-columns:repeat(4,1fr); } } @media (min-width:1200px){ .fnd-2col--wide{ grid-template-columns:.9fr 1.1fr; gap:80px; } } /* mobile rhythm — nothing on this site reduces 120px, so this page does */ @media (max-width:1199px){ .fnd-page h1.fnd-h1{ font-size:54px; } .fnd-page .fnd-h2{ font-size:38px; } } @media (max-width:991px){ .fnd-page{ --fnd-gap:78px; } .fnd-page h1.fnd-h1{ font-size:46px; } .fnd-page .fnd-h2{ font-size:34px; } .fnd-hero{ padding-top:148px; padding-bottom:64px; } } @media (max-width:767px){ .fnd-btn{ width:100%; justify-content:center; } } @media (max-width:575px){ .fnd-page{ --fnd-gap:60px; } .fnd-page h1.fnd-h1{ font-size:37px; } .fnd-page .fnd-h2{ font-size:28px; } .fnd-lede{ font-size:16.5px; } .fnd-hero{ padding-top:128px; } .fnd-pair__side,.fnd-scope__col,.fnd-form{ padding:28px 22px; } .fnd-stat{ padding:26px 22px; } .fnd-btn{ width:100%; justify-content:center; } } /* ---------- motion ------------------------------------------------------ */ @media (prefers-reduced-motion:reduce){ .fnd-page *, .fnd-page *::before, .fnd-page *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } }