/** * CSS especifico do tema da escola. * * O que e compartilhado com o site pessoal vive em shared/css/ e e copiado * para ca por `npm run sync`. Nao duplicar componente aqui: se os dois sites * usam, o lugar e shared/css/componentes.css. */ /* =============================================================== * * Especificos da escola * =============================================================== */ /* --------------------------------------------------------------- * * Logomarca da escola * * O arquivo e o `logo-alss-05.webp`, gerado de * `.materiais/LOGOMARCA/Logo Andrea Lopes Surfschool.png` — PNG de 2870x1238 * com fundo TRANSPARENTE, que e o que permite o logo pousar sobre foto sem * caixa branca em volta. A cliente reenviou esse mesmo arquivo em 22/08. * * Duas diferencas em relacao ao logo do site pessoal: * * 1. Este e COLORIDO (turquesa, laranja, amarelo) e tem duas linhas de texto * sob tres icones. Proporcao 2,32:1 — muito mais alto que o lockup da * Andrea (5,1:1), entao a altura util do wordmark e menor e o logo precisa * de mais altura no cabecalho para o nome continuar legivel. * * 2. A versao branca NAO pode ser `invert( 1 )`: invertido, turquesa vira * vermelho e amarelo vira azul — um negativo. O que da branco puro * preservando o alpha e `brightness( 0 )` (tudo para preto) seguido de * `invert( 1 )` (preto para branco). Um arquivo serve as duas situacoes, e * as duas versoes nao podem divergir de recorte porque sao a mesma. * --------------------------------------------------------------- */ .al-header__logo img { /* Altura, nunca largura — ver o item 1 acima. */ height: clamp( 2.4rem, 3.2vw, 3rem ); width: auto; } /* * Enquanto o cabecalho flutua sobre a foto, o logo e branco. Ao rolar, * `.is-fixo` traz o fundo claro e ele volta a ser colorido. * * A condicao e' a classe `al-capa-flutuante`, que o al-core poe no * (inc/body-class.php) — a MESMA que o base.css usa para deixar o cabecalho * transparente. Uma condicao, um lugar: enquanto eram duas listas, bastava uma * cobrir mais casos que a outra para aparecer logo colorido sobre foto escura * (ilegivel) ou logo branco sobre cabecalho branco (invisivel). */ body.al-capa-flutuante .al-header:not( .is-fixo ) .al-header__logo img { filter: brightness( 0 ) invert( 1 ); } /* Rodape em petroleo: logo branco sempre. */ .al-footer__logo { margin-bottom: var( --al-space-40 ); line-height: 0; } .al-footer__logo img { width: 100%; max-width: 210px; height: auto; filter: brightness( 0 ) invert( 1 ); } /* --------------------------------------------------------------- * * Grade de experiencias * --------------------------------------------------------------- */ .alss-grade { display: grid; grid-template-columns: repeat( auto-fill, minmax( min( 100%, 17rem ), 1fr ) ); gap: var( --al-space-50 ); list-style: none; margin: 0; padding: 0; } .alss-card { display: flex; } .alss-card__link { display: flex; flex-direction: column; width: 100%; background: var( --al-white ); border-radius: var( --al-radius-card ); overflow: hidden; text-decoration: none; color: inherit; box-shadow: var( --al-shadow-card ); transition: box-shadow 0.2s ease, transform 0.2s ease; } .alss-card__link:hover { box-shadow: var( --al-shadow-lift ); } @media ( prefers-reduced-motion: no-preference ) { .alss-card__link:hover { transform: translateY( -3px ); } } .alss-card__foto { position: relative; background: var( --al-sand-100 ); } .alss-card__foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .alss-card__badge { position: absolute; top: 0.75rem; left: 0.75rem; padding: 0.3rem 0.7rem; border-radius: var( --al-radius-pill ); /* Amarelo com texto escuro: 10.6:1. Amarelo com branco seria ilegivel. */ background: var( --al-yellow-500 ); color: var( --al-ink-900 ); font-family: var( --al-font-display ); font-size: 0.6875rem; font-weight: 700; letter-spacing: var( --al-ls-caixa-alta ); text-transform: uppercase; } .alss-card__corpo { display: flex; flex-direction: column; gap: 0.625rem; padding: var( --al-space-50 ); flex: 1; } .alss-card__titulo { margin: 0; font-size: 1.1875rem; text-transform: uppercase; letter-spacing: 0.02em; } .alss-card__resumo { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var( --al-ink-600 ); } .alss-card__cta { margin-top: auto; padding-top: 0.5rem; font-family: var( --al-font-display ); font-size: 0.8125rem; font-weight: 700; letter-spacing: var( --al-ls-caixa-alta ); text-transform: uppercase; color: var( --al-teal-700 ); } .alss-card__link:hover .alss-card__cta { color: var( --al-orange-700 ); } /* --------------------------------------------------------------- * * Chips (duracao, idade, nivel) * --------------------------------------------------------------- */ .alss-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; list-style: none; margin: 0; padding: 0; } .alss-chips li { padding: 0.25rem 0.625rem; border-radius: var( --al-radius-pill ); background: var( --al-teal-50 ); color: var( --al-teal-900 ); font-size: 0.75rem; font-weight: 600; } .alss-chips--grande { gap: 0.5rem; margin-bottom: var( --al-space-70 ); } .alss-chips--grande li { padding: 0.5rem 1rem; font-size: 0.875rem; } /* --------------------------------------------------------------- * * Detalhes da experiencia * --------------------------------------------------------------- */ .alss-bloco + .alss-bloco { margin-top: var( --al-space-80 ); } .alss-bloco__titulo { margin: 0 0 var( --al-space-40 ); font-size: var( --al-fs-titulo-3 ); text-transform: uppercase; letter-spacing: 0.02em; } .alss-lista { display: grid; gap: 0.75rem; list-style: none; margin: 0; padding: 0; } /* * Grid de duas colunas em vez de padding + ::before. * * O marcador agora e um do Font Awesome no HTML. Se o ::before * continuasse aqui, cada item apareceria com DOIS sinais de certo — um do * icone e outro do CSS. * * O grid tambem resolve um defeito do arranjo antigo: com padding-left, a * segunda linha de um item longo voltava para debaixo do marcador. */ .alss-lista li { display: grid; grid-template-columns: 1.25rem 1fr; gap: 0.65rem; align-items: start; line-height: 1.55; } .alss-lista .al-ico { margin-top: 0.3em; color: var( --al-teal-700 ); } .alss-lista--nao { color: var( --al-ink-600 ); } .alss-lista--nao .al-ico { color: var( --al-ink-600 ); opacity: 0.7; } .alss-incluso { display: grid; gap: var( --al-space-60 ); } @media ( min-width: 40em ) { .alss-incluso { grid-template-columns: 1fr 1fr; gap: var( --al-space-70 ); } } /* --------------------------------------------------------------- * * FAQ —
nativo, sem uma linha de JS * --------------------------------------------------------------- */ .alss-faq__item { border-bottom: 1px solid var( --al-ink-300 ); } .alss-faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.125rem 0; font-family: var( --al-font-display ); font-weight: 700; font-size: 1rem; cursor: pointer; list-style: none; } .alss-faq__item summary::-webkit-details-marker { display: none; } .alss-faq__seta { color: var( --al-teal-700 ); transition: transform 0.22s ease; } .alss-faq__item[open] .alss-faq__seta { transform: rotate( 180deg ); } .alss-faq__resposta { padding: 0 0 1.125rem; line-height: 1.65; color: var( --al-ink-600 ); max-width: var( --al-medida ); } /* =============================================================== * * Pilares (por que a A. Lopes) * =============================================================== */ .alss-pilares { display: grid; gap: var( --al-space-60 ); } @media ( min-width: 40em ) { .alss-pilares { grid-template-columns: repeat( 2, 1fr ); } } @media ( min-width: 64em ) { .alss-pilares { grid-template-columns: repeat( 4, 1fr ); gap: var( --al-space-50 ); } } .alss-pilar { padding-top: var( --al-space-40 ); border-top: 2px solid rgba( 255, 255, 255, 0.18 ); } .alss-pilar__n { display: block; margin-bottom: var( --al-space-30 ); font-family: var( --al-font-display ); font-size: 1.5rem; line-height: 1; color: var( --al-yellow-500 ); } .alss-pilar h3 { margin: 0 0 0.5rem; font-size: 1.125rem; color: var( --al-white ); } .alss-pilar p { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: rgba( 255, 255, 255, 0.76 ); }