/* ========================================================================== OBSIDIAN — SRP LANDING PAGE DESIGN SYSTEM v1.0.0 Scoping: every rule is namespaced with .srp-* class selectors. The plugin adds .srp-page to on the SRP page only. Nothing here can leak into the rest of obsidianadvisoryafrica.com. Elementor: apply these class names in each widget's Advanced > CSS Classes field. Do not set colours or spacing in Elementor's Style tab for elements that carry an .srp-* class — you will end up with two competing sources of truth and the Elementor value will win via inline CSS. Design system: pattern-drafting grid and cut lines, drawn from garment production. Primary #461840. ========================================================================== */ .srp-page{ --srp-plum:#461840; --srp-plum-deep:#2A0E27; --srp-plum-mid:#5E2757; --srp-red:#D81E2C; --srp-red-dark:#B01722; --srp-paper:#F4EFF2; --srp-paper-warm:#FBF8FA; --srp-ink:#1C1219; --srp-muted:#6B5A66; --srp-line:#DCCCD7; --srp-display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif; --srp-body:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,sans-serif; --srp-mono:"DM Mono",ui-monospace,"SFMono-Regular",monospace; } /* Reset Elementor container padding inside SRP sections so the design's own rhythm is the one that applies. Kept narrow on purpose. */ .srp-page .srp-band > .e-con-inner, .srp-page .srp-band > .elementor-container{padding-left:0;padding-right:0} /* -------------------------------------------------------------------------- 1. TYPOGRAPHY PRIMITIVES -------------------------------------------------------------------------- */ .srp-page .srp-body, .srp-page .srp-text{ font-family:var(--srp-body); font-size:17px; line-height:1.62; color:var(--srp-muted); } .srp-page .srp-text p{margin:0 0 18px} .srp-page .srp-text p:last-child{margin-bottom:0} .srp-page .srp-eyebrow{ font-family:var(--srp-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--srp-muted); margin:0 0 18px; display:flex; align-items:center; gap:10px; } .srp-page .srp-eyebrow::after{ content:""; flex:1; height:1px; background:repeating-linear-gradient(90deg,var(--srp-line) 0 6px,transparent 6px 12px); } .srp-page .srp-h1{ font-family:var(--srp-display); font-weight:800; font-size:clamp(44px,8.2vw,96px); line-height:.94; letter-spacing:-.035em; color:#fff; margin:0 0 8px; text-wrap:balance; } .srp-page .srp-h2, .srp-page .srp-h2 .elementor-heading-title{ font-family:var(--srp-display); font-weight:800; font-size:clamp(30px,4.4vw,50px); line-height:1.04; letter-spacing:-.02em; color:var(--srp-ink); margin:0 0 22px; } .srp-page .srp-h3, .srp-page .srp-h3 .elementor-heading-title{ font-family:var(--srp-display); font-weight:600; font-size:22px; line-height:1.15; letter-spacing:-.015em; color:var(--srp-plum); margin:0 0 18px; } .srp-page .srp-lede{ font-family:var(--srp-body); font-size:clamp(17px,2vw,20px); color:var(--srp-muted); max-width:62ch; margin:0 0 18px; } .srp-page .srp-invert, .srp-page .srp-invert .elementor-heading-title{color:#fff} .srp-page .srp-invert .srp-eyebrow{color:rgba(255,255,255,.6)} .srp-page .srp-invert .srp-eyebrow::after{ background:repeating-linear-gradient(90deg,rgba(255,255,255,.3) 0 6px,transparent 6px 12px); } .srp-page .srp-invert .srp-text, .srp-page .srp-invert .srp-text p{color:rgba(255,255,255,.8)} /* -------------------------------------------------------------------------- 2. BANDS — background treatments for Elementor containers -------------------------------------------------------------------------- */ .srp-page .srp-band{position:relative;overflow:hidden} /* Signature: pattern-drafting grid. Pure CSS, no image request, so the hero paints without waiting on the network. */ .srp-page .srp-band--plum, .srp-page .srp-band--deep{color:#fff} .srp-page .srp-band--plum{background-color:var(--srp-plum)} .srp-page .srp-band--deep{background-color:var(--srp-plum-deep)} .srp-page .srp-band--plum::before, .srp-page .srp-band--deep::before{ content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px); background-size:34px 34px; pointer-events:none; z-index:0; } .srp-page .srp-band--plum::after{ content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 15% 25%,rgba(94,39,87,.85),transparent 62%); pointer-events:none; z-index:0; } .srp-page .srp-band > *{position:relative;z-index:1} .srp-page .srp-band--paper{background-color:var(--srp-paper)} .srp-page .srp-band--warm{background-color:var(--srp-paper-warm)} /* Signature: cut line. A dashed rule with a notch, as on a pattern piece. Use on an Elementor Divider widget, or an empty HTML widget. */ .srp-page .srp-cut{ position:relative; height:1px; border:0; margin:0; background:repeating-linear-gradient(90deg,var(--srp-line) 0 8px,transparent 8px 16px); } .srp-page .srp-cut::before{ content:""; position:absolute; left:50%; top:-4px; width:9px; height:9px; margin-left:-4.5px; border-left:1px solid var(--srp-line); border-bottom:1px solid var(--srp-line); transform:rotate(-45deg); background:var(--srp-paper); } /* -------------------------------------------------------------------------- 3. BUTTONS Applied to Elementor Button widgets via CSS Classes. -------------------------------------------------------------------------- */ .srp-page .srp-btn .elementor-button, .srp-page a.srp-btn, .srp-page button.srp-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--srp-body); font-weight:600; font-size:16px; line-height:1.2; padding:16px 26px; border:0; border-radius:2px; text-decoration:none; cursor:pointer; transition:background-color .18s ease; } .srp-page .srp-btn--primary .elementor-button, .srp-page a.srp-btn--primary, .srp-page button.srp-btn--primary{background-color:var(--srp-red);color:#fff} .srp-page .srp-btn--primary .elementor-button:hover, .srp-page a.srp-btn--primary:hover, .srp-page button.srp-btn--primary:hover{background-color:var(--srp-red-dark);color:#fff} .srp-page .srp-btn--ghost .elementor-button, .srp-page a.srp-btn--ghost{ background-color:transparent; color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.45); } .srp-page .srp-btn--ghost .elementor-button:hover, .srp-page a.srp-btn--ghost:hover{background-color:rgba(255,255,255,.1);color:#fff} .srp-page .srp-btn .elementor-button:focus-visible, .srp-page a.srp-btn:focus-visible, .srp-page button.srp-btn:focus-visible{outline:3px solid #fff;outline-offset:3px} .srp-page .srp-btn__price{font-family:var(--srp-mono);font-size:14px;opacity:.85} /* -------------------------------------------------------------------------- 4. HERO PARTS -------------------------------------------------------------------------- */ .srp-page .srp-hero__tag{ font-family:var(--srp-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.7); margin:0 0 26px; } .srp-page .srp-hero__abbr{ display:block; font-family:var(--srp-display); font-weight:600; font-size:clamp(20px,3vw,32px); color:rgba(255,255,255,.55); letter-spacing:-.01em; margin:0 0 26px; } .srp-page .srp-hero__sub{ font-family:var(--srp-body); font-size:clamp(17px,2.1vw,21px); line-height:1.5; color:rgba(255,255,255,.86); max-width:54ch; margin:0 0 34px; } .srp-page .srp-hero__meta{ display:flex; flex-wrap:wrap; font-family:var(--srp-mono); font-size:12.5px; letter-spacing:.03em; color:rgba(255,255,255,.78); margin:0 0 34px; } .srp-page .srp-hero__meta span{ padding-right:16px; margin-right:16px; border-right:1px solid rgba(255,255,255,.24); } .srp-page .srp-hero__meta span:last-child{border-right:0;margin-right:0;padding-right:0} .srp-page .srp-count{ display:inline-flex; align-items:baseline; gap:9px; padding:11px 16px; border:1px dashed rgba(255,255,255,.32); border-radius:2px; font-family:var(--srp-mono); font-size:12.5px; letter-spacing:.05em; color:rgba(255,255,255,.9); } .srp-page .srp-count strong{font-size:19px;font-weight:500;color:#fff} /* -------------------------------------------------------------------------- 5. PATHWAY CARDS — marker layout -------------------------------------------------------------------------- */ .srp-page .srp-paths{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; } .srp-page .srp-path{ background:#fff; border:1px dashed var(--srp-line); border-radius:2px; padding:28px 26px 26px; } .srp-page .srp-path__num{ font-family:var(--srp-mono); font-size:11px; letter-spacing:.16em; color:var(--srp-red); display:block; margin-bottom:10px; } .srp-page .srp-path__name{ font-family:var(--srp-display); font-weight:600; font-size:22px; line-height:1.15; letter-spacing:-.015em; color:var(--srp-plum); margin:0 0 18px; } .srp-page .srp-path ul{list-style:none;margin:0;padding:0} .srp-page .srp-path li{ font-family:var(--srp-body); font-size:15.5px; color:var(--srp-muted); padding:7px 0; border-top:1px solid rgba(220,204,215,.55); } .srp-page .srp-path li:first-child{border-top:0;padding-top:0} /* -------------------------------------------------------------------------- 6. ELIGIBILITY / DETAILS / FEES -------------------------------------------------------------------------- */ .srp-page .srp-elig{ border-left:3px solid var(--srp-plum); padding:6px 0 6px 22px; max-width:66ch; } .srp-page .srp-elig p{margin:0;font-family:var(--srp-body);font-size:17px;color:var(--srp-ink)} .srp-page .srp-details{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--srp-line); border:1px solid var(--srp-line); border-radius:2px; overflow:hidden; } .srp-page .srp-details__cell{background:var(--srp-paper-warm);padding:26px 22px} .srp-page .srp-details__k{ font-family:var(--srp-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--srp-muted); margin:0 0 10px; } .srp-page .srp-details__v{ font-family:var(--srp-display); font-weight:600; font-size:20px; line-height:1.2; color:var(--srp-plum); margin:0; } .srp-page .srp-fees{display:grid;grid-template-columns:1fr 1fr;gap:20px} .srp-page .srp-fee{ background:#fff; border:1px solid var(--srp-line); border-radius:2px; padding:32px 28px; display:flex; flex-direction:column; } .srp-page .srp-fee__who{ font-family:var(--srp-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--srp-muted); margin:0 0 14px; } .srp-page .srp-fee__amt{ font-family:var(--srp-display); font-weight:800; font-size:clamp(34px,5vw,46px); line-height:1; letter-spacing:-.03em; color:var(--srp-plum); margin:0 0 16px; } .srp-page .srp-fee p{ font-family:var(--srp-body); font-size:15.5px; color:var(--srp-muted); margin:0 0 22px; flex:1; } .srp-page .srp-fee .srp-btn{width:100%} /* -------------------------------------------------------------------------- 7. FORM These rules style the Fluent Forms output so the form matches the page without the form plugin's own theme fighting it. Wrap the form in an Elementor container with class .srp-form-shell. -------------------------------------------------------------------------- */ .srp-page .srp-form-shell{ background:#fff; border:1px solid var(--srp-line); border-radius:2px; padding:clamp(26px,4vw,44px); max-width:780px; } .srp-page .srp-form-shell .ff-el-input--label label, .srp-page .srp-form-shell label{ font-family:var(--srp-body); font-size:14px; font-weight:600; color:var(--srp-ink); margin-bottom:7px; } .srp-page .srp-form-shell input[type="text"], .srp-page .srp-form-shell input[type="email"], .srp-page .srp-form-shell input[type="tel"], .srp-page .srp-form-shell input[type="url"], .srp-page .srp-form-shell input[type="number"], .srp-page .srp-form-shell select, .srp-page .srp-form-shell textarea{ width:100%; font-family:var(--srp-body); /* 16px minimum stops iOS Safari zooming the viewport on focus. */ font-size:16px; padding:13px 14px; border:1px solid var(--srp-line); border-radius:2px; background:var(--srp-paper-warm); color:var(--srp-ink); box-shadow:none; } .srp-page .srp-form-shell input:focus, .srp-page .srp-form-shell select:focus, .srp-page .srp-form-shell textarea:focus{ outline:2px solid var(--srp-plum); outline-offset:1px; background:#fff; border-color:var(--srp-plum); } .srp-page .srp-form-shell textarea{min-height:96px;resize:vertical} .srp-page .srp-form-shell .ff-btn-submit, .srp-page .srp-form-shell button[type="submit"]{ width:100%; font-family:var(--srp-body); font-weight:600; font-size:17px; padding:18px; background:var(--srp-red); color:#fff; border:0; border-radius:2px; cursor:pointer; } .srp-page .srp-form-shell .ff-btn-submit:hover, .srp-page .srp-form-shell button[type="submit"]:hover{background:var(--srp-red-dark)} .srp-page .srp-secure{ font-family:var(--srp-mono); font-size:12px; color:var(--srp-muted); text-align:center; margin:14px 0 0; letter-spacing:.03em; } .srp-page .srp-closed{ background:#fff; border:1px dashed var(--srp-line); border-radius:2px; padding:36px 30px; text-align:center; max-width:780px; } .srp-page .srp-closed__title{ font-family:var(--srp-display); font-weight:600; font-size:24px; color:var(--srp-plum); margin:0 0 10px; } .srp-page .srp-closed__body{font-family:var(--srp-body);color:var(--srp-muted);margin:0} /* -------------------------------------------------------------------------- 8. FAQ Styles Elementor's Accordion / Toggle widget. -------------------------------------------------------------------------- */ .srp-page .srp-faq{max-width:800px} .srp-page .srp-faq .elementor-accordion-item, .srp-page .srp-faq details{ border:0; border-bottom:1px solid var(--srp-line); } .srp-page .srp-faq .elementor-tab-title, .srp-page .srp-faq summary{ font-family:var(--srp-display); font-weight:600; font-size:18px; letter-spacing:-.01em; color:var(--srp-plum); background:transparent; border:0; padding:22px 40px 22px 0; cursor:pointer; list-style:none; position:relative; } .srp-page .srp-faq summary::-webkit-details-marker{display:none} .srp-page .srp-faq summary::after{ content:"+"; position:absolute; right:6px; top:19px; font-family:var(--srp-mono); font-size:22px; font-weight:400; color:var(--srp-red); } .srp-page .srp-faq details[open] summary::after{content:"\2013"} .srp-page .srp-faq .elementor-tab-content, .srp-page .srp-faq .srp-faq__a{ font-family:var(--srp-body); color:var(--srp-muted); border:0; padding:0 0 24px; margin:0; max-width:66ch; } .srp-page .srp-faq .elementor-accordion-icon{color:var(--srp-red)} .srp-page .srp-pending{color:var(--srp-red-dark);font-weight:600} /* -------------------------------------------------------------------------- 9. RESPONSIVE Mobile-first correction. Most SRP traffic will be Android over mobile data. -------------------------------------------------------------------------- */ @media (max-width:1024px){ .srp-page .srp-details{grid-template-columns:repeat(2,1fr)} } @media (max-width:880px){ .srp-page .srp-paths{grid-template-columns:1fr} .srp-page .srp-fees{grid-template-columns:1fr} } @media (max-width:560px){ .srp-page .srp-text, .srp-page .srp-body{font-size:16px} .srp-page .srp-hero__meta{flex-direction:column;gap:8px} .srp-page .srp-hero__meta span{border-right:0;padding-right:0;margin-right:0} .srp-page .srp-details{grid-template-columns:1fr} .srp-page .srp-btn .elementor-button, .srp-page a.srp-btn{width:100%} } @media (prefers-reduced-motion:reduce){ .srp-page *{animation:none !important;transition:none !important} } /* -------------------------------------------------------------------------- 10. PRINT — applicants do print these pages -------------------------------------------------------------------------- */ @media print{ .srp-page .srp-band--plum, .srp-page .srp-band--deep{background:#fff !important;color:#000 !important} .srp-page .srp-band--plum::before, .srp-page .srp-band--plum::after, .srp-page .srp-band--deep::before{display:none} .srp-page .srp-h1, .srp-page .srp-hero__sub, .srp-page .srp-hero__meta{color:#000 !important} .srp-page .srp-form-shell{display:none} } /* ========================================================================== 11. LAYOUT SAFETY NET (added v1.0.1) Belt-and-braces against Elementor container direction falling back to row on the frontend. The template now sets flex_direction explicitly, so this should never fire — but it costs nothing and prevents a silent regression if someone re-imports an older template. ========================================================================== */ 1. Force every SRP container to stack Covers Elementor's flexbox containers (.e-con / .e-con-inner) and the older section/column markup, so it works either way. -------------------------------------------------------------------------- */ .srp-band, .srp-band > .e-con-inner, .srp-band > .elementor-container{ display:flex !important; flex-direction:column !important; flex-wrap:nowrap !important; align-items:stretch !important; justify-content:flex-start !important; } /* -------------------------------------------------------------------------- 2. Stop widgets behaving as flex items Without this, each widget is sized to its content rather than the row, which is what produced the one-word-per-line bullet list. -------------------------------------------------------------------------- */ .srp-band > .e-con-inner > .elementor-element, .srp-band > .elementor-element, .srp-band .elementor-widget{ width:100% !important; max-width:100% !important; flex:0 0 auto !important; align-self:stretch !important; } /* -------------------------------------------------------------------------- 3. Content width Elementor's boxed width can collapse when direction is wrong. Re-assert it. -------------------------------------------------------------------------- */ .srp-band > .e-con-inner{ width:100% !important; max-width:1140px !important; margin-left:auto !important; margin-right:auto !important; } /* -------------------------------------------------------------------------- 4. Eyebrow overlap The eyebrow is a flex row with a dashed rule that expands to fill. Inside a mis-directed parent it collapsed onto the heading. Pin its own box. -------------------------------------------------------------------------- */ .srp-eyebrow{ display:flex !important; width:100% !important; align-items:center; gap:10px; margin:0 0 18px !important; white-space:nowrap; } .srp-eyebrow::after{flex:1 1 auto;min-width:20px} /* -------------------------------------------------------------------------- 5. Text should never be forced into a narrow column -------------------------------------------------------------------------- */ .srp-band p, .srp-band ul, .srp-band ol, .srp-band h1, .srp-band h2, .srp-band h3{ max-width:100%; overflow-wrap:break-word; } .srp-band ul, .srp-band ol{width:100%} /* -------------------------------------------------------------------------- 6. Mobile -------------------------------------------------------------------------- */ @media (max-width:1024px){ .srp-band > .e-con-inner{max-width:100% !important} } @media (max-width:767px){ .srp-band, .srp-band > .e-con-inner, .srp-band > .elementor-container{ flex-direction:column !important; padding-left:18px !important; padding-right:18px !important; } .srp-band > .e-con-inner > .elementor-element, .srp-band .elementor-widget{width:100% !important} /* Long single words in headings were breaking the column badly */ .srp-band h1, .srp-band h2{hyphens:none;word-break:normal} /* Keep the chat bubble off the final call to action */ .srp-band--plum:last-of-type{padding-bottom:120px !important} } /* -------------------------------------------------------------------------- 7. Business card block This was the worst-hit section. Constrain it explicitly. -------------------------------------------------------------------------- */ .srp-band .srp-biz, .srp-band .srp-form-shell, .srp-band .srp-details, .srp-band .srp-paths, .srp-band .srp-fees, .srp-band .srp-faq, .srp-band .srp-elig{ width:100% !important; max-width:100% !important; box-sizing:border-box; } .srp-band .srp-form-shell, .srp-band .srp-faq{max-width:800px !important} /* ========================================================================== 12. PAYSTACK FORMS (added v1.0.2) Payment Forms for Paystack outputs its own markup with Bootstrap-ish class names that vary between versions. Rather than chase those class names, these rules target bare elements inside .srp-form-shell, which is a container we control. That holds regardless of what the plugin renames. ========================================================================== */ /* --- the two registration blocks --- */ .srp-reg{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start} .srp-reg__block{scroll-margin-top:90px} .srp-reg__head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:6px; } .srp-reg__title{ font-family:var(--srp-display); font-weight:600; font-size:22px; line-height:1.15; letter-spacing:-.015em; color:var(--srp-plum); margin:0; } .srp-reg__price{ font-family:var(--srp-mono); font-size:15px; color:var(--srp-red); white-space:nowrap; } .srp-reg__blurb{ font-family:var(--srp-body); font-size:15.5px; color:var(--srp-muted); margin:0 0 16px; } /* --- form chrome --- */ .srp-form-shell form{margin:0} .srp-form-shell .form-group, .srp-form-shell p{margin:0 0 18px} .srp-form-shell label, .srp-form-shell .control-label{ display:block; font-family:var(--srp-body); font-size:14px; font-weight:600; color:var(--srp-ink); margin:0 0 7px; line-height:1.4; } .srp-form-shell input[type="text"], .srp-form-shell input[type="email"], .srp-form-shell input[type="tel"], .srp-form-shell input[type="url"], .srp-form-shell input[type="number"], .srp-form-shell input[type="date"], .srp-form-shell input[type="file"], .srp-form-shell select, .srp-form-shell textarea, .srp-form-shell .form-control{ width:100%; font-family:var(--srp-body); /* 16px minimum. Anything smaller makes iOS Safari zoom the viewport when a field is focused, which on a payment form reads as the page breaking. */ font-size:16px; line-height:1.4; padding:13px 14px; border:1px solid var(--srp-line); border-radius:2px; background:var(--srp-paper-warm); color:var(--srp-ink); box-shadow:none; appearance:none; -webkit-appearance:none; height:auto; } .srp-form-shell select{ background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%236B5A66' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:38px; } .srp-form-shell input[type="file"]{padding:11px 14px;background:#fff} .srp-form-shell textarea{min-height:96px;resize:vertical} .srp-form-shell input:focus, .srp-form-shell select:focus, .srp-form-shell textarea:focus{ outline:2px solid var(--srp-plum); outline-offset:1px; border-color:var(--srp-plum); background:#fff; } /* Radio and checkbox groups */ .srp-form-shell input[type="radio"], .srp-form-shell input[type="checkbox"]{ width:auto; margin:0 9px 0 0; accent-color:var(--srp-plum); transform:translateY(1px); } .srp-form-shell .radio, .srp-form-shell .checkbox{margin:0 0 8px} .srp-form-shell .radio label, .srp-form-shell .checkbox label, .srp-form-shell label > input[type="checkbox"] + span, .srp-form-shell label > input[type="radio"] + span{ font-weight:400; font-size:15px; color:var(--srp-muted); display:inline; } /* Required asterisk the plugin adds */ .srp-form-shell .required, .srp-form-shell abbr[title="required"]{color:var(--srp-red);text-decoration:none} /* --- submit --- */ .srp-form-shell button, .srp-form-shell input[type="submit"], .srp-form-shell .btn, .srp-form-shell .btn-primary{ width:100%; font-family:var(--srp-body); font-weight:600; font-size:17px; line-height:1.2; padding:18px; background:var(--srp-red); background-image:none; color:#fff; border:0; border-radius:2px; cursor:pointer; text-shadow:none; transition:background-color .18s ease; } .srp-form-shell button:hover, .srp-form-shell input[type="submit"]:hover, .srp-form-shell .btn:hover, .srp-form-shell .btn-primary:hover{background:var(--srp-red-dark);color:#fff} .srp-form-shell button:focus-visible, .srp-form-shell input[type="submit"]:focus-visible{outline:3px solid var(--srp-plum);outline-offset:2px} /* The plugin echoes the amount; keep it from looking like stray text */ .srp-form-shell .amount, .srp-form-shell .pff-amount{ font-family:var(--srp-mono); font-size:15px; color:var(--srp-plum); } /* Validation messages */ .srp-form-shell .error, .srp-form-shell .help-block, .srp-form-shell .invalid-feedback{ font-family:var(--srp-body); font-size:13.5px; color:var(--srp-red-dark); margin-top:6px; } @media (max-width:880px){ .srp-reg{grid-template-columns:1fr;gap:32px} } /* ========================================================================== 13. FASHION CAREER FAIR 2026 (added v1.0.3) Same design system, sibling identity. The Career Fair's own material runs black with a gold accent, so the accent shifts from red to gold while the action colour stays red across both pages — a visitor moving between them should still recognise "red means click". ========================================================================== */ .cff-page{ --srp-gold:#E0A93B; --srp-gold-soft:#F0D9A8; --srp-plum:#2A0E27; /* the fair reads darker than SRP */ --srp-plum-deep:#170615; } /* Accent swaps: eyebrow rules, numbering, small marks */ .cff-page .srp-path__num, .cff-page .srp-reg__price, .cff-page .srp-faq summary::after{color:var(--srp-gold)} .cff-page .srp-hero__abbr{color:var(--srp-gold-soft)} /* --- headline pairing: three verbs, set as a stack --- */ .cff-promise{ font-family:var(--srp-mono); font-size:clamp(12px,1.6vw,14px); letter-spacing:.16em; text-transform:uppercase; color:var(--srp-gold); margin:0 0 22px; line-height:1.9; } .cff-promise span{white-space:nowrap} .cff-promise span + span::before{ content:"·"; margin:0 10px; color:rgba(255,255,255,.35); } /* --- two-audience split --- */ .cff-split{display:grid;grid-template-columns:1fr 1fr;gap:20px} .cff-panel{ background:#fff; border:1px solid var(--srp-line); border-radius:2px; padding:32px 28px; display:flex; flex-direction:column; } .cff-panel--dark{ background:var(--srp-plum); border-color:rgba(255,255,255,.14); color:#fff; } .cff-panel__who{ font-family:var(--srp-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--srp-muted); margin:0 0 12px; } .cff-panel--dark .cff-panel__who{color:var(--srp-gold)} .cff-panel__title{ font-family:var(--srp-display); font-weight:600; font-size:26px; line-height:1.12; letter-spacing:-.02em; color:var(--srp-plum); margin:0 0 16px; } .cff-panel--dark .cff-panel__title{color:#fff} .cff-panel p{ font-family:var(--srp-body); font-size:15.5px; color:var(--srp-muted); margin:0 0 18px; } .cff-panel--dark p{color:rgba(255,255,255,.8)} .cff-panel ul{list-style:none;margin:0 0 24px;padding:0;flex:1} .cff-panel li{ font-family:var(--srp-body); font-size:15.5px; color:var(--srp-muted); padding:9px 0 9px 22px; position:relative; border-top:1px solid rgba(220,204,215,.55); } .cff-panel li:first-child{border-top:0} .cff-panel li::before{ content:""; position:absolute; left:2px;top:18px; width:7px;height:7px; border-left:1px solid var(--srp-gold); border-bottom:1px solid var(--srp-gold); transform:rotate(-45deg); } .cff-panel--dark li{color:rgba(255,255,255,.82);border-top-color:rgba(255,255,255,.14)} .cff-panel .srp-btn{width:100%} /* --- SRP cross-promotion band --- */ .cff-promo{ border:1px dashed var(--srp-gold); border-radius:2px; background:rgba(224,169,59,.07); padding:clamp(26px,4vw,40px); display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap; } .cff-promo__text{flex:1 1 340px} .cff-promo__title{ font-family:var(--srp-display); font-weight:600; font-size:clamp(20px,2.6vw,26px); line-height:1.2; letter-spacing:-.015em; color:var(--srp-plum); margin:0 0 8px; } .cff-promo p{ font-family:var(--srp-body); font-size:15.5px; color:var(--srp-muted); margin:0; } .cff-page .cff-promo__title{color:#fff} .cff-page .cff-promo p{color:rgba(255,255,255,.78)} /* --- when & where --- */ .cff-when{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--srp-line); border:1px solid var(--srp-line);border-radius:2px;overflow:hidden} .cff-when__cell{background:var(--srp-paper-warm);padding:28px 24px} .cff-when__k{font-family:var(--srp-mono);font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--srp-muted);margin:0 0 10px} .cff-when__v{font-family:var(--srp-display);font-weight:600;font-size:21px; line-height:1.2;color:var(--srp-plum);margin:0} @media (max-width:880px){ .cff-split{grid-template-columns:1fr} .cff-when{grid-template-columns:1fr} .cff-promo{flex-direction:column;align-items:flex-start} .cff-promo .srp-btn{width:100%} }