/* ========================================================================== Kovens Conference Center — single-page notice Built to the FIU Pantera design system (pantera.fiu.edu) Colors are the official Pantera values. Type follows FIU's guidance: Frank New, with Helvetica as the approved fallback. Frank New lives on Adobe Fonts — if Digital Communications gives you the Typekit ID for it, drop the kit's in the and the stack below picks it up with no other changes. ========================================================================== */ :root{ --fiu-blue: #081E3F; /* official blue */ --blue-1: #0A254E; /* Pantera blue shade */ --blue-2: #0C2B5A; /* Pantera blue shade */ --fiu-gold: #B6862C; /* official gold */ --bright-gold: #FFCC00; /* secondary */ --dark-gray: #333333; --med-gray: #E6E6E6; --light-gray: #F4F4F4; --white: #FFFFFF; --sans: "Frank New", "Helvetica Neue", Helvetica, Arial, sans-serif; --gutter: clamp(1.25rem, 5vw, 3rem); --shell: 75rem; } *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--white); color:var(--dark-gray); font-family:var(--sans); font-size:1.0625rem; line-height:1.65; -webkit-font-smoothing:antialiased; } img{ display:block; max-width:100%; } a{ color:var(--blue-2); } a:hover{ color:var(--fiu-gold); } :focus-visible{ outline:3px solid var(--bright-gold); outline-offset:2px; } .shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter); } .skip{ position:absolute; left:-9999px; background:var(--bright-gold); color:var(--fiu-blue); padding:.75rem 1.25rem; font-weight:700; z-index:20; } .skip:focus{ left:1rem; top:1rem; } /* ---------- Masthead ---------------------------------------------------- */ .masthead{ background:var(--fiu-blue); padding-block:1.125rem; } .masthead .shell{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; } .lockup{ display:inline-block; line-height:0; } .lockup img{ width:clamp(15rem, 34vw, 20.5rem); height:auto; } .lockup:hover{ opacity:.82; } .masthead-link{ color:var(--white); font-size:.9375rem; font-weight:600; text-decoration:none; border-bottom:2px solid var(--fiu-gold); padding-bottom:.15rem; white-space:nowrap; } .masthead-link:hover{ color:var(--bright-gold); border-color:var(--bright-gold); } /* ---------- Site title band --------------------------------------------- */ .title-band{ background:var(--blue-1); position:relative; z-index:1; border-top:1px solid rgba(255,255,255,.12); padding-block:1.5rem; } .title-band h1{ margin:0; color:var(--white); font-size:clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem); font-weight:700; line-height:1.15; letter-spacing:-.005em; } /* ---------- Hero photo / slideshow -------------------------------------- */ .hero{ position:relative; background:var(--fiu-blue); height:clamp(15rem, 36vw, 31rem); overflow:hidden; } .stage{ position:absolute; inset:0; } .stage img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 62%; opacity:0; transition:opacity .9s ease; } .stage img.is-current{ opacity:1; } /* Controls sit inside the photo, bottom right, where the sweep is deepest */ .controls{ display:none; position:absolute; right:clamp(1rem, 4vw, 2.5rem); bottom:clamp(.75rem, 2.5vw, 1.5rem); z-index:2; align-items:center; gap:.75rem; background:rgba(8,30,63,.72); padding:.5rem .875rem; border-radius:2rem; backdrop-filter:blur(2px); } .controls.is-on{ display:flex; } .arrow{ appearance:none; background:transparent; border:1px solid rgba(255,255,255,.55); color:var(--white); width:1.875rem; height:1.875rem; border-radius:50%; font-size:1rem; line-height:1; cursor:pointer; transition:background .2s ease, border-color .2s ease; } .arrow:hover{ background:rgba(255,255,255,.2); border-color:var(--bright-gold); } .dots{ display:flex; gap:.5rem; } .dot{ appearance:none; padding:0; width:.625rem; height:.625rem; border-radius:50%; border:1px solid rgba(255,255,255,.75); background:transparent; cursor:pointer; } .dot[aria-current="true"]{ background:var(--bright-gold); border-color:var(--bright-gold); } /* ---------- Message ------------------------------------------------------ */ .message{ padding-block:clamp(1.25rem, 3vw, 2rem) clamp(2.5rem, 6vw, 4rem); } .message .shell{ max-width:56rem; } .message h2{ margin:0; color:var(--fiu-blue); font-size:clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem); font-weight:700; line-height:1.15; letter-spacing:-.012em; text-wrap:balance; } .gold-rule{ width:5rem; height:4px; background:var(--fiu-gold); border:0; margin:1.375rem 0 1.75rem; } .message p{ margin:0 0 1.125rem; max-width:44rem; font-size:1.125rem; text-wrap:pretty; } .message p:last-child{ margin-bottom:0; } .message .enquiry{ margin-top:1.75rem; padding-top:1.375rem; border-top:1px solid var(--med-gray); } .message .enquiry a{ font-weight:700; color:var(--fiu-blue); text-underline-offset:.2em; white-space:nowrap; } .message .enquiry a:hover{ color:var(--fiu-gold); } /* ---------- Referral ----------------------------------------------------- */ .referral{ background:var(--light-gray); border-top:1px solid var(--med-gray); padding-block:clamp(2.5rem, 6vw, 4rem); } .referral .shell{ max-width:56rem; } .referral h2{ margin:0 0 .75rem; color:var(--fiu-blue); font-size:clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem); font-weight:700; line-height:1.2; text-wrap:balance; } .referral > .shell > p{ margin:0 0 2rem; max-width:40rem; text-wrap:pretty; } .card{ background:var(--white); border-left:6px solid var(--fiu-gold); padding:clamp(1.5rem, 3vw, 2rem); display:grid; grid-template-columns:1fr auto; gap:1.5rem 2.5rem; align-items:center; } @media (max-width:44rem){ .card{ grid-template-columns:1fr; align-items:start; } } .card h3{ margin:0 0 .25rem; color:var(--fiu-blue); font-size:1.25rem; font-weight:700; line-height:1.25; } .card .unit{ margin:0 0 1rem; color:#5A6472; font-size:.9375rem; } .card ul{ margin:0; padding:0; list-style:none; } .card li + li{ margin-top:.375rem; } .card li a{ font-size:1.0625rem; font-weight:600; color:var(--blue-2); text-underline-offset:.2em; } .button{ display:inline-block; background:var(--fiu-blue); color:var(--white); font-size:1rem; font-weight:700; text-decoration:none; padding:.875rem 1.75rem; border-bottom:4px solid var(--fiu-gold); transition:background .2s ease; text-align:center; } .button:hover{ background:var(--blue-2); color:var(--white); } /* ---------- Unit footer -------------------------------------------------- */ .unit-footer{ background:var(--fiu-blue); color:var(--white); padding-block:clamp(2.25rem, 5vw, 3.25rem); } .unit-footer .shell{ display:grid; grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr)); gap:2.25rem 3rem; } .unit-footer h2{ margin:0 0 .875rem; font-size:1.0625rem; font-weight:700; color:var(--white); padding-bottom:.625rem; border-bottom:2px solid var(--fiu-gold); } .unit-footer p{ margin:0 0 .75rem; font-size:.9375rem; line-height:1.6; color:#C9D3E0; } .unit-footer ul{ margin:0; padding:0; list-style:none; } .unit-footer li + li{ margin-top:.5rem; } .unit-footer a{ color:var(--white); font-size:.9375rem; text-underline-offset:.2em; } .unit-footer a:hover{ color:var(--bright-gold); } /* ---------- Global bar --------------------------------------------------- */ .global-bar{ background:var(--blue-2); color:#C9D3E0; font-size:.8125rem; padding-block:1.25rem; border-top:1px solid rgba(255,255,255,.12); } .global-bar .shell{ display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; align-items:center; } .global-bar p{ margin:0; } .global-bar a{ color:#C9D3E0; } .global-bar a:hover{ color:var(--bright-gold); } /* ---------- Preferences -------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ .stage img{ transition:none; } } @media print{ .hero{ display:none; } .masthead, .title-band, .unit-footer, .global-bar{ background:var(--white) !important; color:#000 !important; } .title-band h1, .unit-footer h2, .unit-footer a, .global-bar, .global-bar a{ color:#000 !important; } .unit-footer p{ color:#333 !important; } .button{ background:none !important; color:#000 !important; border:1px solid #000; } .referral{ background:none; } }