@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Source+Sans+3:wght@300;400;500;600;700;800&display=swap'); /* TTGG Standard Stylesheet Shared by reader portal, band portal, and feedback form. Required body classes: Reader portal / band portal Band-specific portal, optional modifier Feedback form */ :root { /*-- COLORS --*/ --white: #fffaf0; --gray: #595852; --tan: #e3dac9; --gold: #d3b05f; --orange: #c45508; --black: #292827; --green-dk: #22362B; --blue-dk: #343a4a ; --opacity-high: 0.1; --opacity: 0.5; --opacity-low: 0.8; /*primary*/ --font-display: 'Playfair Display', serif; --font-body: 'Source Sans 3', sans-serif; --bg-main: var(--blue-dk); --accent-main: var(--orange); --text-main: var(--white); --border-main: var(--black); /*variants*/ --bg-secondary: var(--black); --bg-contrast: rgb(from var(--white) r g b / var(--opacity-high)); --bg-panel: var(--blue-dk); --bg-card: var(--white); --bg-card-hover: var(--tan); --text-accent: var(--orange); --text-secondary: var(--tan); --text-contrast: var(--black); --accent-dark: var(--orange); --accent-light: var(--gold); --border-secondary: var(--gray); --border-form: var(--border-main); --border-form-secondary: var(--gray); --radius-page: 18px; --radius-card: 13px; --radius-control: 7px; } * { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { min-height: 100vh; font-family: var(--font-body); color: var(--text-main); background: var(--bg-main ); overflow-x: hidden; } img, svg, video { max-width: 100%; height: auto; } a { color: inherit; } /* -------------------------------------------------------------------------- Page modes -------------------------------------------------------------------------- */ body.portal-page { background: radial-gradient(circle at top center, color-mix(in srgb, var(--accent-main) 20%, transparent), transparent 20%), linear-gradient(180deg, var(--bg-main) 0%, var(--bg-secondary) 100%); display: flex; align-items: center; justify-content: center; padding: 32px 18px; } body.form-page { background: var(--bg-main); } /* -------------------------------------------------------------------------- Shared page header -------------------------------------------------------------------------- */ .header { text-align: center; position: relative; overflow: hidden; border-bottom: 0px solid var(--border-main); } .header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--bg-main), var(--accent-main), var(--bg-main)); } .portal-page .header { padding: 52px 32px 32px; } .form-page .header { background: var(--bg-main); border-bottom-color: none; padding: 32px 24px 24px; } .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--text-accent); margin-bottom: 14px; } .page-title { font-family: var(--font-display); font-size: clamp(24px, 5vw, 38px); line-height: 1.1; color: var(--text-main); font-weight: 700; letter-spacing: 0.5px; margin-bottom: 8px; } .portal-page .page-title { font-size: clamp(22px, 4vw, 34px); line-height: 1.04; } .subtitle { font-size: 15px; color: var(--text-main); font-style: italic; margin-bottom: 32px; } .intro { max-width: 620px; margin: 0 auto; color: var(--text-secondary); font-size: 15px; line-height: 1.7; } .band-portal .intro { padding: 0px 20px; border-left: 1px solid var(--text-secondary); border-right: 1px solid var(--text-secondary); border-radius: var(--radius-page); } /* -------------------------------------------------------------------------- Portal layout -------------------------------------------------------------------------- */ .page { width: 100%; max-width: 820px; border-width: 0px 1px 1px 1px; border-style: solid; border-color: var(--border-main); border-radius: var(--radius-page); background: var(--bg-main); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38); overflow: hidden; position: relative; } .content { padding: 34px 32px 42px; } .button-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 64px; } .band-portal .button-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .card { min-height: 155px; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; text-decoration: none; color: inherit; background: var(--bg-card); border: 1px solid var(--border-main); border-radius: var(--radius-card); transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease; } .card:hover { transform: translateY(-3px); border-color: var(--accent-main); background: var(--bg-card-hover); } .card-number, .section-number { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-main); color: var(--text-contrast); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 14px; font-weight: 700; flex-shrink: 0; } .card-number { margin-bottom: 18px; } .card-title { font-family: var(--font-display); color: var(--text-accent); font-size: 24px; letter-spacing: 1px; font-weight: 700; line-height: 1.1; margin-bottom: 9px; } .card-text { color: var(--text-contrast); font-size: 13px; line-height: 1.5; margin-bottom: 18px; } .card-cta, .submit-btn { border: none; border-radius: var(--radius-control); background: var(--accent-light); color: var(--text-contrast); font-family: var(--font-body); font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; cursor: pointer; } .card-cta { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 11px 13px; font-size: 12px; } .page-note-title { font-family: var(--font-display); color: var(--text-accent); font-size: 24px; letter-spacing: 1px; font-weight: 700; line-height: 1.1; margin-bottom: 9px; } .page-note { border-top: 1px solid var(--accent-main); border-bottom: 1px solid var(--accent-main); padding: 20px 0px; border-radius: var(--radius-page); color: var(--text-main); font-size: 15px; line-height: 1.65; text-align: left; max-width: 650px; margin: 0 auto; } .footer { padding: 18px 24px 24px; text-align: center; color: var(--text-secondary); font-size: 12px; font-style: italic; line-height: 1.45; } /* -------------------------------------------------------------------------- Feedback form layout -------------------------------------------------------------------------- */ .progress-bar { background: var(--black); height: 5px; margin: 22px 24px 0; border-radius: 999px; overflow: hidden; } .progress-fill { height: 100%; background: var(--accent-light)); border-radius: 999px; transition: width 0.35s ease; width: 0%; } .progress-label { text-align: center; font-size: 12px; color: var(--color-secondary); padding: 7px 24px 0; letter-spacing: 0.5px; } .form-container { max-width: 720px; margin: 0 auto; padding: 26px 16px 52px; } .section { margin-bottom: 34px; } .section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; padding-bottom: 12px; border-bottom: 1px solid var(--accent-light); } .section-number { background: var(--accent-light); } .section-title { font-family: var(--font-display); font-size: 18px; letter-spacing: 2px; font-weight: 600; color: var(--accent-light); } .question { margin-bottom: 26px; } .question-label { font-size: 15px; font-weight: 600; color: var(--text-main); margin-bottom: 10px; line-height: 1.45; } .question-label .q-num { color: var(--text-main); font-weight: 700; margin-right: 4px; } .question-note { font-size: 13px; color: var(--text-secondary); font-style: italic; margin-top: 4px; margin-bottom: 8px; line-height: 1.45; } .radio-group { display: flex; flex-direction: column; gap: 8px; } .checkbox-group { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .radio-option, .checkbox-option { display: flex; align-items: center; gap: 11px; padding: 12px 15px; background: var(--bg-contrast); border: 1px solid var(--border-form); border-radius: var(--radius-control); cursor: pointer; transition: all 0.15s ease; } .radio-option:hover, .checkbox-option:hover { border-color: var(--accent-main); background: var(--bg-main); } .radio-option.selected, .checkbox-option.selected { border-color: var(--accent-main); background: var(--bg-secondary); } .radio-option input[type='radio'], .checkbox-option input[type='checkbox'] { appearance: none; width: 17px; height: 17px; border: 2px solid var(--white); flex-shrink: 0; transition: all 0.15s ease; } .radio-option input[type='radio'] { border-radius: 50%; } .checkbox-option input[type='checkbox'] { border-radius: 4px; } .radio-option input[type='radio']:checked { border-color: var(--accent-main); background: var(--accent-main); box-shadow: inset 0 0 0 3px var(--bg-secondary); } .checkbox-option input[type='checkbox']:checked { border-color: var(--accent-main); background-color: var(--accent-main); background-image: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4L3.5 6.5L9 1' stroke='%231a1a1a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; } .radio-option span, .checkbox-option span { font-size: 14px; color: var(--text-main); line-height: 1.35; } textarea, input[type='text'], input[type='email'] { width: 100%; background: var(--bg-contrast); border: 1px solid var(--border-form); border-radius: var(--radius-control); color: var(--text-main); font-family: var(--font-body); font-size: 14px; padding: 13px 15px; outline: none; transition: border-color 0.15s ease; line-height: 1.55; } textarea { resize: vertical; min-height: 88px; } textarea:focus, input[type='text']:focus { border-color: var(--accent-main); } textarea::placeholder, input[type='text']::placeholder, input[type='email']::placeholder { color: var(--text-secondary); } .scale-group { display: flex; gap: 7px; flex-wrap: wrap; } .scale-btn { width: 46px; height: 46px; background: var(--bg-contrast); border: 1px solid var(--border-form); border-radius: var(--radius-control); color: var(--white); font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.15s ease; display: flex; align-items: center; justify-content: center; font-family: var(--font-body); } .scale-btn:hover { border-color: var(--accent-main); color: var(--accent-main); background: var(--bg-main); } .scale-btn.selected { background: var(--bg-secondary); border-color: var(--accent-main); color: var(--accent-main); font-weight: 700; } .scale-labels { display: flex; justify-content: space-between; margin-top: 7px; padding: 0 2px; gap: 16px; } .scale-label-text { font-size: 12px; color: var(--text-secondary); font-style: italic; } .char-ratings { display: flex; flex-direction: column; gap: 11px; } .char-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; } .char-name { font-size: 14px; color: var(--text-main); width: 96px; flex-shrink: 0; } .char-stars { display: flex; gap: 7px; } .star-btn { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--bg-contrast); transition: color 0.1s ease; padding: 0; line-height: 1; } .star-btn.lit { color: var(--accent-main); } .submit-section { text-align: center; padding: 34px 0 16px; border-top: 1px solid var(--accent-light); margin-top: 20px; } .submit-btn { padding: 15px 50px; font-size: 15px; transition: opacity 0.2s ease; } .submit-btn:hover { opacity: 0.92; } .submit-btn:disabled { opacity: 0.65; cursor: not-allowed; } .submit-note { font-size: 13px; color: var(--text-secondary); margin-top: 13px; font-style: italic; line-height: 1.45; } .thank-you { display: none; text-align: center; padding: 0px 24px; } .thank-you.visible { display: block; } .thank-you h2 { font-family: var(--font-display); font-size: 30px; color: var(--text-main); margin-bottom: 12px; } .thank-you p { font-size: 15px; color: var(--text-main); line-height: 1.7; max-width: 430px; margin: 0 auto; } .thank-you .accent-line { width: 54px; height: 2px; background: var(--accent-light); margin: 20px auto; } .form-main.hidden { display: none; } .q-divider { margin: 22px 0; border-width: 1px 0px 0px 0px; border-color: var(--tan); border-style: dashed; } .hidden { display: none !important; } .yes-no-toggle { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 220px; max-width: 100%; margin-top: 12px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(214, 200, 174, 0.35); overflow: hidden; } .yes-no-toggle input { position: absolute; opacity: 0; pointer-events: none; } .yes-no-toggle label { position: relative; z-index: 2; padding: 10px 18px; text-align: center; cursor: pointer; border-radius: 999px; color: var(--text-tan); font-weight: 600; transition: color 160ms ease; } .yes-no-toggle .toggle-slider { position: absolute; z-index: 1; top: 4px; left: 4px; width: calc(50% - 4px); height: calc(100% - 8px); border-radius: 999px; background: var(--text-gold); transition: transform 180ms ease; } .yes-no-toggle input#contactNo:checked ~ label[for="contactNo"], .yes-no-toggle input#contactYes:checked ~ label[for="contactYes"] { color: var(--black); background: var(--tan); } .yes-no-toggle input#contactYes:checked ~ .toggle-slider { transform: translateX(100%); } /* -------------------------------------------------------------------------- Responsive behavior -------------------------------------------------------------------------- */ @media (max-width: 740px), (max-device-width: 740px) { body.portal-page { min-height: 100svh; align-items: flex-start; justify-content: flex-start; padding: 18px 12px 22px; font-size: 17px; } .portal-page .page { max-width: 100%; border-radius: 14px; } .portal-page .header { padding: 34px 18px 22px; } .portal-page .content { padding: 24px 16px 30px; } .portal-page .button-grid, .band-portal .button-grid { display: flex; flex-direction: column; grid-template-columns: none; gap: 16px; margin-bottom: 26px; } .portal-page .card { width: 100%; min-height: auto; padding: 20px 18px 18px; } .portal-page .eyebrow { font-size: 12px; letter-spacing: 2px; line-height: 1.3; } .portal-page .page-title { font-size: clamp(31px, 9vw, 40px); line-height: 1.05; overflow-wrap: break-word; } .portal-page .subtitle { font-size: 17px; line-height: 1.4; } .portal-page .intro { font-size: 17px; line-height: 1.6; } .portal-page .card-title { font-size: 27px; line-height: 1.12; } .portal-page .card-text { font-size: 17px; line-height: 1.5; margin-bottom: 16px; } .portal-page .card-cta { font-size: 14px; letter-spacing: 1.15px; padding: 15px 14px; } .portal-page .page-note { font-size: 15px; line-height: 1.55; } .portal-page .footer { font-size: 14px; line-height: 1.45; } } @media (max-width: 600px), (max-device-width: 600px) { .form-page .header { padding: 28px 18px 20px; } .form-page .eyebrow { font-size: 10px; letter-spacing: 2px; } .form-page .page-title { font-size: 30px; line-height: 1.15; } .form-page .subtitle { font-size: 14px; } .form-page .intro { font-size: 14px; line-height: 1.55; } .form-container { padding: 22px 14px 46px; } .section { margin-bottom: 38px; } .section-title { font-size: 19px; } .question { margin-bottom: 29px; } .question-label { font-size: 16px; line-height: 1.45; } .question-note { font-size: 13px; line-height: 1.45; } .radio-option, .checkbox-option { padding: 14px 15px; align-items: flex-start; } .radio-option span, .checkbox-option span { font-size: 15px; } .checkbox-group { grid-template-columns: 1fr; } textarea, input[type='text'] { font-size: 16px; padding: 14px; } textarea { min-height: 98px; } .scale-group { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .scale-btn { width: 100%; height: 48px; font-size: 16px; } .char-row { flex-direction: column; align-items: flex-start; gap: 6px; } .char-name { width: auto; font-size: 15px; } .star-btn { font-size: 27px; padding-right: 4px; } .submit-btn { width: 100%; padding: 16px 24px; } } @media (max-width: 380px) { .portal-page .page-title { font-size: 30px; } .portal-page .card-title { font-size: 25px; } .portal-page .intro, .portal-page .card-text, .portal-page .subtitle { font-size: 16px; } }