/* ========================================================================= Framed layout - candidate home page from the client's mockup. Scoped to .IN-framed so it cannot affect any existing page, and kept in its own file so it can be dropped or promoted into style.css as one unit. ========================================================================= */ .IN-framed { --frame-blue: #145683; --frame-blue-deep: #0E3E5F; --frame-gold: #FDC248; --frame-gold-pale: #FDF0D2; --frame-ink: #101828; --frame-body: #55636F; --frame-accent: #4490C9; margin: 0; background: var(--frame-blue); } .IN-framed .frame-shell { padding: 48px 40px; } .IN-framed .frame-card { max-width: 1180px; margin: 0 auto; background: #FFFFFF; border-radius: 4px; box-shadow: 0 30px 70px rgba(0, 20, 40, 0.28); position: relative; overflow: hidden; } /* the mockup region - padded, and the only place the display font applies */ .IN-framed .frame-pad { position: relative; padding: 34px 56px 54px; font-family: "Roboto", "Helvetica Neue", Arial, sans-serif; color: var(--frame-ink); } /* The live sections keep their own full-bleed backgrounds and spacing. position:relative is enough to sit above the decorative motif, which is a z-index:0 absolute element earlier in the DOM. Deliberately NO z-index here: it would make this a stacking context and trap any modal inside it beneath Bootstrap's backdrop, which sits on . */ .IN-framed .frame-sections { position: relative; } .IN-framed .frame-sections > section:first-child { border-top: 1px solid #EDF1F5; } /* --- decorative arrow motif, echoing the pale gold shapes in the mockup --- */ .IN-framed .frame-decor { position: absolute; right: 30px; top: 18px; width: 196px; opacity: 0.9; pointer-events: none; z-index: 0; } /* position only, no z-index: the decor is the first child, so later positioned siblings already paint above it. Giving these a z-index would create stacking contexts that trap the header dropdown underneath the hero. */ .IN-framed .frame-pad > *:not(.frame-decor) { position: relative; } /* ---------------------------------- header -------------------------------- */ .IN-framed .framed-header { display: flex; align-items: center; gap: 32px; margin-bottom: 54px; } .IN-framed .framed-nav { display: flex; align-items: center; gap: 40px; list-style: none; margin: 0; padding: 0; } .IN-framed .framed-nav a { font-size: 14.5px; font-weight: 500; color: #1D2939; text-decoration: none; padding: 6px 0; position: relative; white-space: nowrap; } .IN-framed .framed-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--frame-gold); transform: scaleX(0); transition: transform 0.18s ease; } .IN-framed .framed-nav a:hover, .IN-framed .framed-nav a.active { color: var(--frame-blue); } .IN-framed .framed-nav a:hover::after, .IN-framed .framed-nav a.active::after { transform: scaleX(1); } .IN-framed .framed-brand { margin-left: auto; flex: none; } .IN-framed .framed-cta { flex: none; background: var(--frame-blue); color: #FFFFFF; font-size: 14px; font-weight: 500; text-decoration: none; padding: 13px 26px; border-radius: 6px; transition: background-color 0.16s ease; } .IN-framed .framed-cta:hover { background: var(--frame-blue-deep); color: #FFFFFF; } /* ----------------------------------- hero --------------------------------- */ .IN-framed .framed-hero { display: flex; align-items: flex-start; gap: 30px; justify-content: center; margin-bottom: 64px; } .IN-framed .framed-hero-photo { flex: none; width: 148px; height: 148px; object-fit: cover; filter: grayscale(1) contrast(1.05); display: block; } .IN-framed .framed-hero h1 { font-size: clamp(38px, 5.2vw, 66px); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; margin: 0; text-wrap: balance; } .IN-framed .framed-hero h1 .gold { color: var(--frame-gold); } .IN-framed .framed-hero-sub { margin: 18px 0 0; font-size: 15px; line-height: 1.6; color: var(--frame-body); max-width: 42ch; } /* --------------------------------- features ------------------------------- */ .IN-framed .framed-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; } .IN-framed .framed-feature { display: flex; gap: 12px; align-items: flex-start; } .IN-framed .framed-feature-icon { flex: none; width: 46px; height: 46px; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 22px; } /* alternating tiles, as in the mockup */ .IN-framed .framed-feature:nth-child(odd) .framed-feature-icon { background: var(--frame-gold); color: var(--frame-blue); } .IN-framed .framed-feature:nth-child(even) .framed-feature-icon { background: #17375A; color: var(--frame-gold); } .IN-framed .framed-feature h3 { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: #1D2939; margin: 0 0 5px; } .IN-framed .framed-feature h3 .accent { color: var(--frame-accent); } .IN-framed .framed-feature p { font-size: 11px; line-height: 1.5; color: var(--frame-body); margin: 0; } /* -------------------------------- responsive ------------------------------ */ @media (max-width: 1199.98px) { .IN-framed .frame-card { padding: 30px 36px 44px; } .IN-framed .framed-nav { gap: 26px; } .IN-framed .framed-features { grid-template-columns: repeat(2, 1fr); gap: 24px 30px; } } @media (max-width: 767.98px) { .IN-framed .frame-shell { padding: 20px 14px; } .IN-framed .frame-card { padding: 22px 22px 34px; } .IN-framed .framed-header { flex-wrap: wrap; gap: 18px; margin-bottom: 34px; } /* logo leads, then the menu button and the two actions */ .IN-framed .framed-brand { order: 0; margin-left: 0; margin-right: auto; } .IN-framed .framed-burger { order: 1; } .IN-framed .framed-login { order: 2; } .IN-framed .framed-cta { order: 3; margin-left: 0; } .IN-framed .framed-nav { order: 4; width: 100%; gap: 20px; flex-wrap: wrap; } .IN-framed .framed-brand .brand-badge { height: 52px; } .IN-framed .framed-brand .brand-word { height: 20px; } .IN-framed .framed-brand .brand-tagline { font-size: 8.5px; letter-spacing: 0.12em; } .IN-framed .framed-hero { flex-direction: column; align-items: center; text-align: center; margin-bottom: 46px; } .IN-framed .framed-hero h1 { max-width: none; } .IN-framed .framed-hero-sub { margin-inline: auto; } .IN-framed .framed-features { grid-template-columns: 1fr; } .IN-framed .frame-decor { display: none; } } /* ========================================================================= Header extras: dropdowns, login link, narrow-screen menu ========================================================================= */ /* the header must out-stack the hero and every page section below it, or its dropdowns render behind them */ .IN-framed .frame-pad--header { padding-bottom: 22px; padding-left: 44px; padding-right: 44px; position: relative; z-index: 30; } .IN-framed .frame-pad--hero { padding-top: 14px; } .IN-framed .framed-header { flex-wrap: nowrap; gap: 22px; } .IN-framed .framed-nav { gap: 21px; } .IN-framed .framed-nav .framed-has-menu i { font-size: 9px; margin-left: 2px; vertical-align: middle; } /* Brand lockup: badge image + wordmark image + the punchline as live text, so the punchline is actually readable rather than a 3px smudge. */ .IN-framed .framed-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; } .IN-framed .framed-brand .brand-badge { height: 57px; width: auto; display: block; flex: none; } .IN-framed .framed-brand .brand-lockup { display: flex; flex-direction: column; gap: 4px; } .IN-framed .framed-brand .brand-word { height: 21px; width: auto; display: block; } .IN-framed .framed-brand .brand-tagline { font-size: 8.8px; font-weight: 500; line-height: 1; letter-spacing: 0.13em; text-transform: uppercase; color: var(--frame-blue); white-space: nowrap; } .IN-framed .framed-login { flex: none; font-size: 14px; font-weight: 500; color: #1D2939; text-decoration: none; white-space: nowrap; } .IN-framed .framed-login:hover { color: var(--frame-blue); } .IN-framed .framed-dropdown { border: 0; border-radius: 14px; padding: 8px; margin-top: 8px; min-width: 320px; box-shadow: 0 18px 44px rgba(0, 32, 56, 0.2); } .IN-framed .framed-dropdown .dropdown-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-radius: 9px; padding: 11px 14px; font-size: 14.5px; font-weight: 500; color: var(--frame-blue); white-space: normal; } .IN-framed .framed-dropdown .dropdown-item i { font-size: 12px; opacity: 0.5; flex: none; } .IN-framed .framed-dropdown .dropdown-item:hover, .IN-framed .framed-dropdown .dropdown-item:focus { background: #F1F9FF; color: #003150; } .IN-framed .framed-dropdown .dropdown-item.disabled { color: #7F94A6; opacity: 1; } .IN-framed .framed-dropdown .coming-soon-badge { flex: none; font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; padding: 4px 7px; border-radius: 5px; background: #FFF4DC; color: #8A6208; white-space: nowrap; } .IN-framed .framed-burger { display: none; background: none; border: 0; padding: 8px 6px; gap: 5px; flex-direction: column; } .IN-framed .framed-burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: #1D2939; } /* ========================================================================= Footer sits on the blue ground, so everything in it inverts ========================================================================= */ .IN-framed footer { color: #FFFFFF; } .IN-framed footer .title { color: #FFFFFF; } .IN-framed footer ul li a { color: rgba(255, 255, 255, 0.88); } .IN-framed footer ul li a:hover { color: var(--frame-gold); } /* .text-gradient paints text with a blue gradient and a transparent fill - invisible on blue, so it has to be undone here */ .IN-framed footer .text-gradient { background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: #FFFFFF; text-fill-color: #FFFFFF; color: #FFFFFF; } .IN-framed footer .contact-link.text-gradient:hover { -webkit-text-fill-color: var(--frame-gold); text-fill-color: var(--frame-gold); color: var(--frame-gold); } .IN-framed footer .text-primary { color: rgba(255, 255, 255, 0.6) !important; } .IN-framed footer .note, .IN-framed footer .note.text-gray { color: rgba(255, 255, 255, 0.72) !important; } .IN-framed footer .copyright, .IN-framed footer .copyright a { color: rgba(255, 255, 255, 0.8); } .IN-framed footer .social-links a { border-color: rgba(255, 255, 255, 0.4); color: #FFFFFF; } .IN-framed footer .social-links a svg, .IN-framed footer .social-links a img { filter: brightness(0) invert(1); } .IN-framed footer .social-links a:hover svg, .IN-framed footer .social-links a:hover img { filter: none; } /* ========================================================================= Narrow screens ========================================================================= */ @media (max-width: 1199.98px) { .IN-framed .framed-burger { display: flex; } .IN-framed .framed-header { flex-wrap: wrap; } .IN-framed .framed-nav { display: none; order: 4; width: 100%; flex-direction: column; align-items: flex-start; gap: 2px; border-top: 1px solid #EAEFF4; margin-top: 14px; padding-top: 10px; } .IN-framed .framed-nav.is-open { display: flex; } .IN-framed .framed-nav > li { width: 100%; } .IN-framed .framed-nav a { display: block; padding: 11px 0; width: 100%; } .IN-framed .framed-nav a::after { display: none; } .IN-framed .framed-dropdown { box-shadow: none; background: #F5F9FC; min-width: 0; width: 100%; } .IN-framed .framed-brand { margin-left: 0; margin-right: auto; } } /* ========================================================================= Dialog backdrop. Bootstrap's default is black at 50%, which turns the blue frame and white card behind it muddy. A navy wash at a lower opacity dims the page just as clearly and reads as part of the brand. ========================================================================= */ .IN-framed .modal-backdrop { --bs-backdrop-bg: #0A3550; --bs-backdrop-opacity: 0.42; } /* Footer brand lockup, same construction as the header. Explicit sizes matter here: the source artwork is 1683px wide and would otherwise fill the column. */ .IN-framed footer .footer-brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; } .IN-framed footer .footer-brand .brand-badge { height: 58px; width: auto; display: block; flex: none; } .IN-framed footer .footer-brand .brand-lockup { display: flex; flex-direction: column; gap: 4px; } .IN-framed footer .footer-brand .brand-word { height: 22px; width: auto; display: block; } .IN-framed footer .footer-brand .brand-tagline { font-size: 9.5px; font-weight: 500; line-height: 1; letter-spacing: 0.145em; text-transform: uppercase; color: #FFFFFF; white-space: nowrap; }