|
|
- :root {
- --vertical-rhythm: 5rem;
- --logo-animation-filter-start: drop-shadow(0 -25px 45px #ff2e88) brightness(1) drop-shadow(0 -55px 35px #ff2e88) brightness(1) drop-shadow(0 -35px 155px #ff9800) brightness(4);
- --logo-animation-filter-end: drop-shadow(0 -20px 45px #ff2e88) brightness(.1) drop-shadow(0 0 5px #ff2e88) brightness(.7) drop-shadow(0 -20px 135px #ff2e88) brightness(2);
- }
- main, footer, header, caption {
- text-align: center;
- }
- nav[itemtype*="SiteNavigationElement"] {
- opacity: 0;
- transition: opacity 300ms ease;
- }
- nav[itemtype*="SiteNavigationElement"]:focus-within {
- opacity: 1;
- transition: opacity 300ms ease;
- }
- @media screen and (max-width: 768px) {
- nav[itemtype*="SiteNavigationElement"] {
- display: none;
- }
- .hack header h1 {
- margin-top: 2rem !important;
- }
- .grid {
- flex-direction: row;
- }
- .cell {
- flex: 1;
- }
- }
- .shaded {
- filter: var(--logo-animation-filter-start);
- opacity: 0;
- }
- .animated {
- /* FIXME: Animation disabled due to browser conflict with Web Miner */
- animation: reveal 2s both;
- opacity: 1; /* remove with fix */
- filter: var(--logo-animation-filter-end); /* remove with fix */
- }
- @keyframes reveal {
- from {
- filter: var(--logo-animation-filter-start);
- }
- to {
- filter: var(--logo-animation-filter-end);
- opacity: 1;
- }
- }
- .hack .grid {
- justify-content: center;
- }
- .hack header h1:after {
- content: none;
- }
- .hack header h1 {
- font-family: Futura,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
- padding: 0;
- margin: 1rem;
- font-size: 3em;
- display: inline-block;
-
- background-color: #2a3439;
- color: transparent;
- text-shadow: 0 2px 3px rgba(255, 255, 255, 0.1);
- -webkit-background-clip: text;
- -moz-background-clip: text;
- background-clip: text;
- filter: brightness(3);
- }
- .hack header h1 sup {
- font-size: 1rem;
- }
- .hack header h1 sup:before {
- content: " ";
- }
- .hack header h2:before,
- .hack section h2:before {
- content: unset;
- }
- .hack header h2,
- .hack section h2 {
- margin-top: .8rem;
- font-size: 1.2em;
- }
- .hack header h2 {
- margin-top: -1rem;
- }
- .hack .install.cta {
- margin-top: -1rem;
- margin-bottom: 2rem;
- }
- .hack .install.cta form[action*="quick-install"] {
- width: unset;
- }
- .hack .install.cta form[action*="quick-install"] button {
- border-radius: 4px;
- color: #ccc;
- background-color: #ff2e8860;
- transition: all 0.25s ease;
- }
- .hack .install.cta form[action*="quick-install"] button:hover,
- .hack .install.cta form[action*="quick-install"] button:focus {
- background-color: #ff2e8880;
- color: #fff;
- }
- .hack .install.cta form[action*="quick-install"] button svg {
- stroke: #ff9800;
- }
- .hack section:not(.capabilities) {
- margin: var(--vertical-rhythm) 0;
- }
- .hack section.logo a {
- border-bottom: none;
- background-color: inherit;
- }
- .hack section.hero {
- margin-top: -3rem;
- margin-bottom: 0;
- }
- .hack section.hero img {
- pointer-events: none;
- }
- .hack section.feature ul li {
- display: inline;
- padding-left: unset;
- }
- .hack section.feature ul > li::after {
- position: unset;
- content: "";
- }
- .hack section.feature ul > li:not(:last-of-type)::after {
- content: " | ";
- }
- .hack section.hero figure {
- margin: 0;
- line-height: 0;
- min-height: 266px;
- }
- @media screen and (min-width: 768px) {
- .hack section.hero figure img {
- margin: -3em 0 -2em;
- }
- }
- .hack section.tagline p {
- margin: 0;
- font-size: 1.1rem;
- line-height: 1.6;
- }
- .hack section.capabilities table a {
- display: block;
- }
- .hack footer section.cta {
- margin-top: 6rem;
- }
- .hack footer section.cta a {
- border-bottom: none;
- background-color: inherit;
- color: #ff9800;
- display: inline-block;
- }
- .hack footer section.cta a:hover {
- color: #fff;
- }
- .hack footer section.cta a small {
- display: block;
- }
- .hack.dark table tbody td:first-child {
- color: inherit;
- font-weight: initial;
- }
- .hack.dark table tr th {
- background-color: #1976d220;
- }
- .hack.dark table tr td a {
- border: 1px solid #2196f340;
- padding: 0.25rem;
- }
- .hack.dark table tr td a:hover {
- transition: all 300ms ease;
- background-color: #ff2e8860;
- border-color: #2196f360;
- }
- .hack.dark table tr td a:not(:hover) {
- transition: all 300ms ease;
- background-color: #ff2e8825;
- }
|